Search code examples
csswordpressmenutransparencysticky

Adjust whole upper area of website for fixed/'sticky' menu

I would like to request help with making the Wordpress menu fixed (aka 'sticky'), in a functional way, by means of CSS.

This is the site I'm working on.

I've partly managed this with the CSS code setting #site-navigation to position: fixed. The problem is that the result is very poor, as the page content can be seen behind, above, and right of the menu when one scrolls down. I would need to turn the whole upper area of the site around the menu into a fixed, opaque object, so that the content behind it can't be seen or clicked on.

Thank you very much for any pointers

Solution 
  • .main-navigation {
    position: fixed;
    padding-top: 0;
    padding-bottom: 5px;
    z-index: 99999;
    background: #fff;
    top: 0;
    width: 68.571428571rem;
    margin-top: 0;
}

    with a fixed element you can set top, left, right, bottom value. z-index value will keep your element forward or backward based on priority.