Put the Menu Above the Slider and Have It Scroll

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

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

You’re awesome, Kharis.

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

Thank you. Bo

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

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

Try this jQuery/CSS code solution, please.

Regards,
Kharis

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

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

Hello Bo,

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

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

Regards,
Kharis

Hello again Kharis Support.

I am putting the final touches on my site. I am planning to launch January 1st. Thank you for all of your help throughout the building process.

I added the code you suggested, and the sticky menu is not working on any of the pages in any of the layouts.

The sticky menu was originally working when I first started building my site. Since then, i have added a lot of CSS coding, including coding (that you sent me) to move my header logo to above the slider graphic. I believe this may be when the sticky menu stopped working. Not sure.

Regardless, I still need help getting my sticky menu to work.

Any suggestions?

Thanks, Bo

Actually, the sticky menu IS working in the tablet and mobile layouts.

The only layout this is NOT working is the Desktop layout, both on the home page and all remaining pages.

Thanks! Bo

Hello there,

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

    @media only screen and (min-width: 1025px) {
      #masthead.site-header.float-header {
        position: fixed !important;
      }  
    }

Regards,
Kharis

You are the man, Kharis! Worked perfectly. Thanks so much.

Bo

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