Create a menu bar at top of Jumbotron

Hello.
I dont like the menu bar where it is or how it can only show 5 pages before then showing the next page below the first.
I want a traditional menu bar at the top of the page with a plain colour background.
Can this be done?

I read another post about making a floating menu bar using “Sticky menu” plugin but after following the instructions correctly this does not work.

Thank you in anticipation.

www.myretrowatches.com

Hello there,

I hope you are doing well today.

You can use the following CSS code to make the header sticky/fixed by going to Appearance > Customize > Additional CSS and pasting it there.

/*Sticky header*/
.top-header {
    background-color: red;
    position: sticky;
    z-index: 122;
    width: 100%;
    top: 0;
}

Best Regards,
Support

Thank you for this and your quick reply. This is most appreciated.
The menu bar is very thick (height) how would I code this to reduce the size? add a line height?

thanks

Although it is set to “sticky” the menu does not stick using that css. you Scroll down the page and it does not follow?

Hello there,

Thanks for telling me this. Please try adding the following CSS and tell me if the sticky menu works

/*Sticky menu additional css*/
#header .top-header, .responsive-menu {
    position: sticky;
    z-index: 2;
}

Best Regards,
Support

Hello thanks for that code however it does not work properly. Menu bar will only scroll to the end of the jumbotron picture or on other pages to the end of the blog title picture.

Is this because the menu bar is integrated with the jumbotron and blog picture?

see here www.myretrowatches.com

Hello Moderator.

Sorry but the code you gave to make the menu bar sticky will only make it scroll to the end of the jumbotron.

It also will not work on mobile?

thanks for your help.

Hello there,

Thanks for telling me this. Please try adding the following CSS and tell me if the sticky menu works

/Sticky menu additional css/
#header .top-header, .responsive-menu {
position: sticky;
z-index: 2;
}
Best Regards,
Support

Hi,

Can you try this in the Custom CSS? ( Remove the Old CSS and add this )

/*Sticky menu additional css*/
#header .top-header, .responsive-menu {
    position: fixed;
    z-index: 9999;
}

Let us know,

Thanks,
laranz.