-
Posts
-
Header geometry is really important – many times I have a tall logo. What is the best way to handle this in Enfold?
Sometimes I would like the logo to overhang the header bar instead of being contained by it. How can I do this? Does anyone have any examples?
Hey hmsvictory!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
strong.logo.bg-logo { top: 40px; }If that does not work, please post the link to your website
Regards,
YigitIt took me some time to try, but that did not work.
Can we look at a different example? This time trying with a boxed layout – “Boxed Blue”. Here is the default appearance:
But the logo is too small – it is contained by the #header_main div. I would like the logo to be as tall as the entire header plus the title_container below the header. Like this:
The strong.logo element will need to overlap the #header_meta and .title_container. I can add some margin to the page title.
I am not sure if negative margins or overflow properties would be best to use.
Oh well, I think I solved the problem!
#header_meta {z-index: 1;} #header_main {z-index: 3;} strong.logo {top: -25px; height: 200px !important; width: auto;} h1.main-title {padding-left: 250px;}strong.logo positions the logo and sizes it. The h1 element gets pushed over so the hanging down part of the logo does not block it. Some changes to z index so that the overhanging logo can be seen.
- You must be logged in to reply to this topic.