Search code examples
javascriptreactjssemantic-ui

h2 element is not visible in React while using semantic-ui

h2 element is not visible in React while using semantic-ui

My react code is accessible in code-sandbox, https://codesandbox.io/s/suspicious-hill-4f4xr?file=/src/AddContact.js:137-159

I have 2 components embedded within App. 1st is the header component showing string 'Contact Manager' 2nd component, which is AddContact, is a form containing just 2 fields: name, email.

Now, the interesting thing is that, h2 element within AddContact, is not visible while rendering.

Can anyone let me know, why does h2 element gets hidden ?

The url shared above for code sandbox, directly cursors to the h2 element code.

The react app rendered by code sandbox can be directly accessed from https://4f4xr.csb.app/

From my side, I came to know that, using className="ui fixed menu" is what is hiding content below. But, I am not sure, why it happens.

Thanks.

enter image description here

Solution

  • The fixed menu covers the h2 element.

    .ui.menu.fixed {
    position: fixed;
    z-index: 101;
    margin: 0;
    width: 100%;
}

    If you replaced position:fixed with position:relative, the h2 element should display below the menu.

    To fix the issue, you can add a top padding above the h2 or the container that is holding it, or add margins wherever necessary.