Header Menu is sitting on top of Header Text | Code Issue or Education?

Hey guys,

I am running into a Home Page Menu issue with my Header Text. Will you take a look and let me know if I am missing a setting or if this is a code issue? Thank you for your help!

Best Wishes,
Dan

Hello there,

In order to fix it, you’ll need to add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .has-hero .site-header,
    .has-hero .header-contact {
      position: relative;  
    }

    .has-hero .site-header {
      background-color: #03477f;
      margin-top: 0;
    }

Regards,
Kharis

Thank you for the quick reply Kharis! I used the code provided and all is well with the exception of the menu is no longer sticky. I love how it looks, can we implement the sticky menu as I scroll the page as well?

Thank you,
Dan

Hello Dan,

Try replacing that code with this one, please.

    body:not(.siteScrolled).has-hero .site-header,
    body:not(.siteScrolled).has-hero .header-contact {
      position: relative;  
    }

    body:not(.siteScrolled).has-hero .site-header {
      background-color: #03477f;
      margin-top: 0;
    }

Regards,
Kharis