2 issues with my header/menu on different size screen

HI,
I am having 2 issues with the site's header:
1) On mobile, the hamburger menu is half cut-off by the black header. I tried using z-index to fix this, but could not find the correct selectors to adjust. Not even sure if that was the correct way to do it.
2) At a certain breakpoint (~1000px width to ~830px) the menu does not show at all. At the close end ot 830, the CTA drops down to the next line and looks messed up.

How can I fix this?
THank you so much!!!

  • Denitsa

    Hello Jonathan,
    I hope you're having a great day!

    The hamburger icon cut-off and the menu not showing at all are basically one and the same problem. If you want to fix that using the z-index property, you should edit the #cms-trust #page-wrapper and actually drop its z-index value lower (it's 999 now and that's why it stays over the menu). Try setting it to 99 for example:

    #cms-trust #page-wrapper {
        z-index: 99;
    }

    About the CTA dropping down next line, we might have to make some adjustments to the header part but as a starter you could add something like

    @media screen and (max-width: 860px) {
    .header-stuff {
      display: none;
    }

    That part is for hiding the entire "header stuff" on smaller screens. Feel free to adjust the max-width value to your liking until it starts looking good.

    Tell me how this works for you!
    Kind regards,
    Denitsa

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.