[Resolved] How can I create a fixed top bar, header and top menu?

[David]

You can ignore them – the WP Additional CSS doesn’t parse some of the newer CSS features.

[Gerhard]

David,
header and menu are sticky now, but there is one strange thing: On pages built with elementor the contents scroll in front of the header and the menu (cf. start page). Whereas on pages built with the the classic wordpress editor the scrolling is correct, i.e. header and menu stay in the foreground, contents disappear behind when scrolling (cf. “Datenschutz”; “Impressum”).
I checked the difference with another test page using elementor, the result is the same.
Currently I have deactivated the css code due to the issue.

Gerhard

[Tom]

Hard for me to tell without seeing the issue, but try this as your CSS:

.custom-fixed-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}

[Gerhard]

Thanks a lot. It works!
But the mobile view is unacceptable as the sticky header now covers most of the screen. I should have thought about that. Sorry.
I suggest making only the main navigation sticky and let the logo and the text widgets disappear when scrolling.
Sorry for bothering you again.

[David]

So you want only the nav to be sticky on mobile? What about on desktop do you still want both header and nav to stick?

[Gerhard]

On mobile as well as on desktop the nav should be sticky, nothing else.

[David]

You can simply use the Sticky Navigation option in Customizer > Layout > Sticky Navigation.
Then this:
https://generatepress.com/forums/topic/how-can-i-create-a-fixed-top-bar-header-and-top-menu/#post-880684

Is not required.

[Gerhard]

Thanks a lot, David. Everything is fine now.

[David]

Glad to be of help

[Stephan]

Hi,

I´d like to reopen this topic. I want to make the navigation (top of the side) sticky but there is no menu as you mention Customizer > Layout > Sticky Navigation.

[Stephan]

Sorry, found it. Translation issue

[Leo]

Awesome 🙂

[Stephan]

It now works besides the start main page. any clues?

[Stephan]

After some debugging it works on the english site but not on the main german site (wpml)

[Stephan]

It is not a cache topic as I checked on chrome and IE in parallel

[Author]

Posts