Tagged: navigation, small, Top
Hey guys,
I have the theme Enfold and the client no longer likes the larger, expanded navigation when sitting at the top of a page. He would like the navigation to always stay the smaller size (what it is when you scroll down). Is there any way to do this? I checked the forums and didn’t turn up anything, or maybe it was because I didn’t know how to ask the right question.
Please let me know. Thanks.
Hi Boston182!
Please use the “Small Nonfixed Header”. Add this on your custom.css or Quick CSS:
#header {
position: fixed;
}
Edit css > layout.css, find this code:
/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a{ height:88px; line-height: 88px; }
Decrease the height and the line-height:
/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
#header_main .container, .main_menu ul:first-child > li a{ height:50px; line-height: 50px; }
Remove browser cache then reload the page.
Best regards,
Ismael
Thanks for your help, Ismael! It looks much better. However, I know that the client will still like to have the social navigation bar up there. Is it possible to have the small header and keep the upper social nav?
Thanks!
Hi!
Please switch your header type to “Fixed header with social icons” and add following code to Quick CSS in Enfold theme options under Styling tab.
#header_main .container, .social_header .main_menu ul:first-child > li a {
height: 58px!important;
line-height: 58px!important;
}
.fixed_header.social_header #main {
padding-top: 89px;
}
.logo img, .logo a { max-height: 58px!important; }
Cheers!
Yigit
Thanks guys. This solved my problem, so this topic can be marked as closed.
Thanks again.