Increase height of header navigation

mhaus93 replied

8 years ago

Customer Reply

Hi,

great, thank you so much. Works perfectly!!

Best Regards,

Michelle

PenciDesign replied

8 years ago

Staff Reply

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

mhaus93 replied

8 years ago

Customer Reply

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?

PenciDesign replied

8 years ago

Staff Reply

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

mhaus93 replied

8 years ago

Customer Reply

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.

PenciDesign replied

8 years ago

Staff Reply

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

mhaus93 replied

8 years ago

Customer Reply

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

PenciDesign replied

8 years ago

Staff Reply

Hi,

Do you mean keep the header height when you scroll down?

Best Regards,

PenciDesign

mhaus93 replied

8 years ago

Customer Reply

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

PenciDesign replied

8 years ago

Staff Reply

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

mhaus93 started the conversation

8 years ago

Conversation Start

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.