[Bas]

On my site http://www.beijes.nl I use a logo in the left side of the header.
I played with the size of the picture and CSS settings. Now I have the following CSS code:
#header-left { height:35px; }
#header-left { width: 720px; }
#header-left{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header-right{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header-left { height: 40px; }
#header-right{ height: 50px; }

But there is still to much white space above and to the left side of the picture.
How can I reduce that? Or is it possible to increase the hight of the header in total?

With kind regards,
Bas Beijes

[tikaram]

@basbeijes : Go to Appearance => Customize => Additional css and add the following css.

#site-logo{
	padding-top: 0;
}
#header-left{
	height: 0 !important;
}

Let me know if you need further assistance.

Regards,
Tikaram

[Bas]

Hello Tikaram,

Thank you for the response.

Is there also a CSS code to limiting the left margin?

I also saw that if you look the website on a Mobile the logo is behind the menu tekst.

That That problem is caused by the CSS code:

#header-left { height:0px; }
#header-left { width: 720px; }
#header-left{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 00px;
padding-left: 0px;
}
#header-right{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header-left { height: 40px; }
#header-right{ height: 40px; }

But when I remove that code the image is to far from the photo (whit emargin under the picture).

Can I remove this code and replace it wth another?

With kind regards,

Bas Beijes

[tikaram]

@basbeijes :Remove the additional css and let me know. I will provide you the additional css to fix the issue.

Regards,
Tikaram

[Bas]

Hello Tikaram,

I removed the additional CSS. This is my CSS code now:
#site-logo{
padding-top: 0;
}
#header-left{
height: 0 !important;
}
body {font-size: 14px;}
.entry-content {line-height: 20px;}
#colophon { border-color: #ffffff }
.gallery {margin-top:20px!important;}
.gallery-item {text-align:left!important;}
.gallery img {border:0px!important;-webkit-border-radius: 5px!important; -moz-border-radius: 5px!important; border-radius: 5px!important;}
.gallery img:hover {opacity:0.8!important;}
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
p img { padding: 0; max-width: 100%; }
/* For Footer Text Color */
#site-generator { color: #d7d7; }
/*
Je kunt hier je eigen CSS toevoegen.

Klik op het help icoon om meer te leren.
*/

You see a lot of white space under and to the left of the picture.

Also is the picture behind the menu text on mobile devices.

With kind regards,

Bas Beijes

[tikaram]

@basbeijes : Add the following additional css to remove the white space above the menu header.

.header-sidebar {
	padding-top: 0;
}

The mobile menu is not working because of Plugin Conflict with our theme. I suggest you to deactivate megamenu plugin and follow this link to know about Plugin Conflict with our themes.

Reagrds,
Tikaram

[Bas]

Hello Tikaram,

The only reason I use the Mega menu plugin is that I want the “Hamburger menu” in orange when gou select it.

If that is possible to creatw with CSS code it is fine with me.

Kind regards

Bas Beijes

[Bas]

Hello Tikaram,

I started my webpage new from start.
After installing the Theme and made the settings like before I mentioned some issues.

I didn’t install al lot of Plugins only Elementor for edit the pages and E-mail address encoder.

The CSS I made is as follow:
.header-sidebar {padding-top: 0;}
#site-logo{ padding-top: 0; }
#header-left{ height: 0 !important;}
body {font-size: 14px;}
.entry-content {line-height: 20px;}
#colophon { border-color: #ffffff }
/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

That is only the css code you gave me and some layout rules.

Now the image is in the place where we like it, but when you look at the site on a Phone the menu text goes through the image.
Another thing is that the menu text won’t dissapear when the hamburger menu is comming in.

And another question is: Is it possible that the hamburger menu turns orange when you click on it.

I hope you can help me whit this questions.

With kind regards,

Bas Beijes

[tikaram]

@basbeijes : Remove the following css from the previous css that I provided.
#header-left{ height: 0 !important;}

Add the following additional css.

@media only screen and (min-width: 990px) {
#header-left{ height: 0 !important;}
}
.menu-header-container .sb-selector {
	display: none;
}
.sb-holder {
	background-color: #ebaa46 !important;
}

Let me know if you have any further issues.

Regards,
Tikaram

[Bas]

Hello Tikaram,

Thank you for the support.

With the CSS you provided there is a orange background behind the hamburger menu.
Is it possible to change the colour of the three tripes from the hamburger menu?

And I know I asking a lot but is it also possible to move te picture in the header more to the left and make the white space under the picture and menu smaller?

Many thanks in advance.

With kind regards,

Bas

[tikaram]

@basbeijes : What color would you like to use for the hamburger menu ?

Add the following css to adjust the space around header image.

@media only screen and (min-width: 990px) {
#hgroup-wrap {
	padding-bottom: 20px !important;
	padding-left: 0;
}
}

Let me know if you need further assistance.

Regards,
Tikaram

[Bas]

Hello Tikaram,

Thank you for the code. I copied it in the CSS and it looks good.

The colour I want for the hamburger menu is #ebaa46

Then a question about an WYSIWYG editor.
Do you have advice which page editor the best is in combination with the Catch Themes?
I use now Elementor and that works fine by me. But if you have a editor that is good to use than I would like to try that.

With kind regards,

Bas Beijes

[Bas]

Hello Tikaram,

I got now a good editor for my text.

The last question I have is the colour of the Hamburger menu.
The CSS code you gave me was the background colour.

I want to change the colour of the hamburger menu when I click on it.
The colour must change to #ebaa46

I hope you can help me with this.

Thank you verry much.

Bas Beijes

[tikaram]

@basbeijes : You have asked to change the color of hamburger menu on click but it cannot be done with additional css. You will need to crate a child theme and customize your site. That can be done adding jQuery. I am not sure if you will be able to make customization after creating a child theme. Let me know if you have any more theme related issues.

Regards,
Tikaram

[Author]

Posts