I would like to increase the height of the header navigation, where my logo is inside. If I just give more padding to the logo, it won't work. I can put in any number but nothing changes. Please help me.
I know my logo is fine, I just want the navigation header to have more height in the beginning and act as it does already when scrolling.
Your provided code won't do it. It will increase the height, but on scroll the height stays like that. I just want it a little bigger when opening the page first.
I want the height like it is already, when scrolling down. I just want to increase the height at the very beginning – before scrolling. Like in the pictures. An when I increase the height in the beginning I want the elements centered vertically. Thank You
Still, I'm not clearly about your question. Do you mean that you want to increase the height when the navigation scroll down? Your explain very hard to understand for me.
Hello,
I would like to increase the height of the header navigation, where my logo is inside. If I just give more padding to the logo, it won't work. I can put in any number but nothing changes. Please help me.
Hi,
I see your logo is fine. It's not need for bigger more.
If you want to make your navigation more height, please add more this code to Customize > Custom CSS:
@media only screen and (min-width: 961px){ #navigation.header-6.menu-item-padding, #navigation.header-9.menu-item-padding, #navigation.header-6.menu-item-padding ul.menu > li > a, #navigation.header-9.menu-item-padding ul.menu > li > a, #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search, #navigation.header-6 .show-search #searchform input.search-input, #navigation.header-6 .show-search { height: 100px; } #navigation.header-6 #logo img{ max-height: 100px; } #navigation.header-6 .menu > li > a, #navigation.header-6 ul.menu > li > a, #navigation.header-6 .main-nav-social, #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search { line-height: 100px; } }And when you changed the height, maybe you need to change the max-width for your logo to make it center in vertical.
Best Regards,
PenciDesign
Hi, thank you for your fast response.
I know my logo is fine, I just want the navigation header to have more height in the beginning and act as it does already when scrolling.
Your provided code won't do it. It will increase the height, but on scroll the height stays like that. I just want it a little bigger when opening the page first.
Thank You
Hi,
Do you mean keep the header height when you scroll down?
Best Regards,
PenciDesign
Hi,
I want the height like it is already, when scrolling down. I just want to increase the height at the very beginning – before scrolling. Like in the pictures. An when I increase the height in the beginning I want the elements centered vertically.
Thank You
Hi,
Still, I'm not clearly about your question. Do you mean that you want to increase the height when the navigation scroll down? Your explain very hard to understand for me.
Best Regards,
PenciDesign
See the pcitures I sent in last post. Before scroll – increased height, On scroll height is decreased.
Right now, with your provided code, the height stays 100px always and doesnt decrease again on scroll.
Hi,
Ok. I understand it now.
If so, please replace the code I sent to this code:
@media only screen and (min-width: 961px){ #navigation.header-6.menu-item-padding, #navigation.header-9.menu-item-padding, #navigation.header-6.menu-item-padding ul.menu > li > a, #navigation.header-9.menu-item-padding ul.menu > li > a, #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search, #navigation.header-6 .show-search #searchform input.search-input, #navigation.header-6 .show-search { height: 100px; } #navigation.header-6 #logo img{ max-height: 100px; } #navigation.header-6 .menu > li > a, #navigation.header-6 ul.menu > li > a, #navigation.header-6 .main-nav-social, #navigation.header-6 #top-search > a, #navigation.header-6 .show-search a.close-search { line-height: 100px; } .is-sticky #navigation.header-6.menu-item-padding, .is-sticky #navigation.header-9.menu-item-padding, .is-sticky #navigation.header-6.menu-item-padding ul.menu > li > a, .is-sticky #navigation.header-9.menu-item-padding ul.menu > li > a, .is-sticky #navigation.header-6 #top-search > a, .is-sticky #navigation.header-6 .show-search a.close-search, .is-sticky #navigation.header-6 .show-search #searchform input.search-input, .is-sticky #navigation.header-6 .show-search { height: 58px; } .is-sticky #navigation.header-6 #logo img{ max-height: 58px; } .is-sticky #navigation.header-6 .menu > li > a, .is-sticky #navigation.header-6 ul.menu > li > a, .is-sticky #navigation.header-6 .main-nav-social, .is-sticky #navigation.header-6 #top-search > a, .is-sticky #navigation.header-6 .show-search a.close-search { line-height: 58px; } }Best Regards,
PenciDesign
Hi,
Thank you it works. One more thing, the logo does not align vertically within decreased height. How can I vertically align the logo too?
Hi,
Please add more this code to Customize > Custom CSS to do that:
#navigation.header-6 #logo img{ padding: 40px 0; } .is-sticky #navigation.header-6 #logo img{ padding: 5px 0; }And note: Remove or increase the max-width for your logo as I said before.
Best Regards,
PenciDesign
Hi,
great, thank you so much. Works perfectly!!
Best Regards,
Michelle