-
Posts
-
Hey there, for a website, that I’m currently setting up for a client, I need some help with the header. They want the have the logo in full width without any changes to the menu settings. It also needs te be on a white background and a black solid border in full width. I hope you understand what I mean?
I have an example (image) of how they want to have the design of the header!
Best regards,
Martijn KosterHey Martijn,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.container.av-logo-container { padding: 0; margin: 0; background: white; }Then go to Enfold theme options > Header and increase header size to preferable 150px to display your logo in full size :)
Best regards,
YigitHey Yigit, thank you for your very quick reaction.
I placed the code and as you can see we are almost there. Is it possible to align the logo in the center and that it will be full-width?Hi TenMediaNL,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.responsive .container.av-logo-container { max-width: 100%; } div .logo { margin: 0 10%; }If you need further assistance please let us know.
Best regards,
VictoriaHey Victoria, thank you for your help.
I think we are almost there. Logo is centered but not completely full width as you can see now.
Do have another tip?Hi,
As i mentioned earlier, going to Enfold theme options > Header and increasing header size would help. We can provide custom CSS as well however that would be skewed.
Best regards,
YigitFYI if anyone is trying to do this, you can add this to Custom CSS and it will span the whole page (at least if you’re using Logo Center/Menu Below for your header):
.container.av-logo-container {
padding: 0;
margin: 0;
}
.html_header_top.html_logo_center .logo {
left: 0%;
-webkit-transform: translate(-50%,0);
-ms-transform: none !important;
transform: none !important;
}
- You must be logged in to reply to this topic.