Search code examples
csshtmlmaterialize

MaterializeCSS form visible over navbar

So, I'm having fun, testing out MaterializeCSS for my new website. Then I realized.

The visuals of my form are hovering on top of my navbar. And this is an issue that I regrettably can't fix and probably has a simple and obvious fix to it...! But I myself am too blind to see it. Could someone help out?

Sana Rinomi's Contact Page

EDIT: I know I'm crappy at explaining issues so I'd though maybe some visuals might help.

Text on top of Navbar

Button on top of Navbar

Solution

  • If I understood the problem correctly, this is quite simple solution. You don't have to remove the fixed position, but you'll have to compensate for the height of the navbar. Position fixed removes the element from the flow, so the other elements "don't see it".

    So, basically just add top margin to your Page container and give it a value of navbar's height:

    .pageContainer {
  margin-top: 64px;
}

    Note that you have to account for different screen sizes and changes of navbar.

    additional reading which may help.

    The (fixed) element is removed from the normal document flow, and no space is created for the element in the page layout. MDN - CSS/position

    EDIT (after further conversation and clarification, I am updating the answer): Original problem happens on scroll. It's because form (or the whole pageContainer) has z-index which is higher than nav (bar). I have added z-index: 2 to the nav element directly in dev tools on Mozilla Firefox and it solved the issue.