Put the Menu Above the Slider and Have It Scroll


#1

Hello again.

I followed another post about having the Primary Menu be located above the Slider. I installed the CSS code provided, and it’s working.

However, in the default template, the menu transitions to having a nice overlay with opacity, and continues to scroll as people are making their way down the page.

By adding the CSS code, the menu is now above the slider, but is stationary, so it scrolls off the page. I prefer to keep the navigation always available.

My question is how to maintain the overlay and scrolling capabilities in the new positioning of the menu, which is now above the slider?

Thanks much, Bo


#2

Hello there,

Is it the code you added to manage the main menu bar positioning?

    .header-contact.clearfix, #masthead.site-header {
      position: static;
    }

Try replacing it with this one, please.

    .header-contact.clearfix, #masthead.site-header:not(.float-header) {
      position: static;
    }

Regards,
Kharis


#3

You’re awesome, Kharis.

I swapped it out, and it’s working perfectly!

Thank you. Bo


#4

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis


#5

Hello Roman / Kharis,

It turns out that the sticky menu only works one the home page in the desktop layout, and doesn’t work in either the tablet or smartphone layouts.

Will you please help me get the sticky menu working on the remaining pages in desktop, as well as the tablet and smartphone layouts?

Thanks, Bo


#6

Try this jQuery/CSS code solution, please.

Regards,
Kharis


#7

Hi again,

I am still having challenges with this.

The only sticky menu that works is the Desktop Home page; all remaining Desktop pages do not work.

The sticky menu is also not working on the Mobile or Tablet screens.

Perhaps I am doing something wrong, tho don’t believe so. Thanks, Bo


#8

Hello Support,

Will you please help me resolve this?

Current Status:

The only sticky menu that works is the Desktop Home page; all remaining Desktop pages do not work.

The sticky menu is also not working on the Mobile or Tablet screens.

Thanks, Bo


#9

Hello Bo,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header.float-header {
      position: static !important;
    }

Regards,
Kharis