[Resolved] Mobile header with only sticky navigation

[ken]

Hi there,

I am trying to design the navbar on my site . I enabled sticky navigation according to the document. However, I found that now there are two mobile headers.

1) On the first load, the header is the same as in desktop version only smaller with the navbar being in the hamburger.
2) when scrolled down, the “normal” header will be hidden and the sticky navigation will come up.

What I would like is to have only the sticky navigation all the time without the desktop menu. I tried disabling the desktop menu using display:none but it seems that the content are the same as the sticky navigation so i would be disabling both.

Can you advice on how to get only the sticky navigation and also ways of styling the sticky navigation? I want the logo to be at the center instead of on the left.

Thanks!

[David]

Hi there,

the best way to do that is to enable Customizer > Layout > Mobile header and enable the sticky navigation for the that option.

Once you have that enabled i will help with centering the logo.

[ken]

Hi there,

I have enabled that and as mentioned above both original nav and the sticky nav is to be seen. I only want the sticky nav.

[Leo]

I’m not seeing the mobile header option activated currently:
https://docs.generatepress.com/article/mobile-header/

[ken]

Hi,

Ah okay, it’s on now and the normal header isn’t there anymore. Can you now guide me how to style it? I want to place the logo in the middle and add color to it.

Thanks!

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    #mobile-header.mobile-header-navigation .site-logo.mobile-header-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
    }
}

[ken]

Hi,

The position is changed but it’s slidely on the right side. Besides, I would also like to give it a background color of #F8F8F8.

Thanks!

[Leo]

Can you try the edited CSS?
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1536637

To change the color, try this:

#mobile-header {
    background-color: #f8f8f8;
}

[ken]

Do you mean you edited the code you posted earlier? I have tried and it’s the same, you can visit the site to check.

[Leo]

Sorry I edited again maybe after replied to the topic initially.

Please try again:
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1536637

And make sure to see the background-color info here:
https://generatepress.com/forums/topic/mobile-header-with-only-sticky-navigation/#post-1537885

[ken]

It seems to work now, I have also added the color. I added box-shadow: 0px 3px 6px #00000029; as well but it doesn’t seems to work, can you tell me why?

[Leo]

Try this instead:

#mobile-header {
    background-color: #f8f8f8;
    box-shadow: 0px 3px 6px #00000029;
    position: relative;
}

[ken]

it’s working! Thanks!

[Leo]

No problem 🙂

[Author]

Posts