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

Question

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.

iismaell · Accepted Answer · 2021-05-24 03:18:43Z

1

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.

answered May 24, 2021 at 3:18

iismaell

6335 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related