Tagged: CSS, logo, menu, shrinking header
Hello,
I have a site in development where I’ve adjusted the logo and menu with the following:
div .logo { left: 95px; bottom: -30px;}
.main_menu div > ul > li > a { line-height: 120px !important; }
The logo is now where I want it to sit, but we want to use the shrinking header feature. With the code above, the logo is justfied down and to the right of default, but does not adapt when the user scrolls and the shrinking header kicks in.
Any idea on how to fix this so its not an absolute position? I want it to shift relative to the bottom of the header as the header shrinks so the logo doesn’t end up half in the main body and half in the header. Same for the menu…
Thanks,
Kyle
If you want to see the site you need to add blog.drippitt.com to your hosts file for IP 198.58.118.210.
Hey Kyle!
Thank you for using Enfold.
Try to replace the code with this:
.logo { left: 95px; bottom: -30px;}
.main_menu div > ul > li > a { line-height: 120px !important; }
.header-scrolled .logo { bottom: 0;}
Best regards,
Ismael
Thanks – both definitely adjust correctly, but the logo loads left justified instead of left 95px. Once I scroll the logo jumps into the right place 95 left…any ideas?
Hey!
Add this below:
#top .logo { left: 95px;}
Best regards,
Josue
Thanks – that worked wonders.
Y’all are great – Enfold has transformed my approach to WordPress forever. I really appreciate everything you do and have done! I can’t believe I ever worked with WordPress in any other theme.
You are welcome, glad to help :)
Regards,
Josue