[Support request] Problems with header and primary nav

[Karsten]

Hey friends, please check out my website

When you scroll down on desktop view the layout of header is completely changing.

Could you please help with suggestion or advice.

Thank you

Karsten

[Ying]

Hi Karsten,

There just simply not enough space for all of the menu items and logo within 1100px width.

Try this CSS:

.inside-navigation.grid-container {
    max-width: 1200px;
}

[Karsten]

Hey Ying, thank you, this helps.

But when I scroll down I would like to keep the logo centered above the prime nav.

Do you have some CSS for me please?

Thank you

[Ying]

Try this CSS then:

#sticky-navigation .inside-navigation.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
 #sticky-navigation .inside-navigation.grid-container .navigation-branding {
    width: 100%;
}
 #sticky-navigation .navigation-branding {
    justify-content: center;
}

[Karsten]

Thank you, Ying

But when you scroll down, the header has blue background and covers the logo.

Please check and help. Thank you

[Ying]

Do you want the background color to be white for the logo and extend full width?

If so, try follow the below steps:
1. go to customizer > layout > header, check the Use Navigation as Header box.

2. go to customizer > layout > primary navigation, select full width for Inner Navigation Width

3. go to customizer > layout > header, uncheck the Use Navigation as Header box.

4. remove the CSS I provided here: https://generatepress.com/forums/topic/problems-with-header-and-primary-nav/#post-2199814

5. add this CSS:

#sticky-navigation .navigation-branding {
    justify-content: center;
    background-color: white;
    width: 100%;
    margin: 0;
}

[Karsten]

Hello Ying, thank you very much for this helpful CSS.

But there is still a little issue:

On mobile and tablet view the logo is still covered by blue colour. How could we uncover the logo?

[Ying]

You are using mobile header, it’s independent from the desktop header and primary navigation.

I think stop using mobile header would be the easiest option, can you give it a try and let me know what do you think?

[Author]

Posts