Archived topic

Sticky top bar together with header

3 replies · Started by Kim on November 4, 2019

Viewing posts 1–4 of 4

November 4, 2019 at 12:11 am #1052559

Hi Leo,

We have been exchanging some messages a few hours ago in https://generatepress.com/forums/topic/how-to-keep-top-bar-sticky-as-the-navigation-bar/#post-1052388.

I opened a new topic to share my website (as your requested) in the private section that only admins can see. However not sure if my e-mail really came through. SO just to be sure I am sending it (again).

Could you please check out my site and give me advice on how to make to top bar sticky as well? And now I have to header sticky both menu and logo are not on the same place any more when srolling. How can I make sure their position is fixed?

Thanks again for your support!

Kim

November 4, 2019 at 4:17 am #1052669

Hi there,

add this CSS:

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}
.sticky-enabled .main-navigation.is_stuck {
    top: 40px !important;
}

Then in Customizer > Layout > Primary Navigation change the inner container to contained.

November 4, 2019 at 4:53 am #1052685

Thanks a lot Leo and David! It works!

November 4, 2019 at 6:15 am #1052741

Glad we could be of help.

This archived topic is closed to new replies.

Start building better websites today.