Static Menu becomes sticky after refreshing page (chrome)

Hello, I need help fixing a bug. Everything looks perfect when you load the page however there is an issue on Chrome where if you scroll down the page and then refresh the page the menu becomes sticky when the page reloads. So far I have not had this issue on mobile, or on internet explorer (Have not tried on Safari). I tried deactivating all plugins but that did not fix the issue.

Here is the website:

https://eastside-landscaping2.com/

The OP from this forum seems to be having the same exact issue but there were not any solutions provided.

https://wordpress.org/support/topic/static-menu-turns-into-sticky-upon-refresh/

Edit: This issue does not occur if I change the header type to “no header (only menu)”. I need the header so this does not actually fix anything but I just wanted to point that out in case it is pertinent to diagnosing the problem

Hello there,

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

    .site-header {
      position: static !important;
      padding-top: 5px;
      padding-bottom: 5px;
    } 

and see if it helps.

Regards,
Kharis

Thank you Kharis,

This did fix the issue however it makes a menu bar that sits above the slider image. If possible I would prefer if the slider extended all the way to the top of the page and for the menu bar to be an overlay. I kept the CSS code you provided in for now so you can see how it has changed.

Please try this code and see if it gives any difference.

    .site-header {
      position: absolute !important;
      background-color: rgba(0,0,0,0.5) !important;
      padding-top: 5px;
      padding-bottom: 5px  
    }

Regards,
Kharis

Perfect, thank you so much for your help :slight_smile:

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