How to prevent HTML elements from going under the header in react

Asked Apr 01 '18 at 17:43

Active Apr 01 '18 at 20:44

Viewed 190 times

I have a header with buttons Profile, Train AI, Matches, Chat Icon and you can see in the above example my Name 1 element & others are going under the header. My CSS for my header is:

<Header
        style={{
            background: colorTheme.text8Color,
            position: 'fixed',
            zIndex: 1, // make every display under the header
            width: '100%'
        }}
    >
        {this.renderHeaderButtons()}
    </Header>

What can I do to prevent anything from going under the header?

edited Apr 01 '18 at 20:44

asked Apr 01 '18 at 17:43

Wang-Zhao-Liu Q

13,555
29
73
112

how about setting a margin-top to div below the header, equal to height of header. – Subin Sebastian Apr 01 '18 at 17:50
@Subin thanks for the suggestion but that didn't work – Wang-Zhao-Liu Q Apr 01 '18 at 17:52
https://stackoverflow.com/questions/10975268/position-fixed-header-in-html – Subin Sebastian Apr 01 '18 at 18:05
https://jsfiddle.net/53jr7esa/3/ – Subin Sebastian Apr 01 '18 at 18:05
You have to fixed the position of your header so after that your sub menu will expand and it will not go under your header. – Abhishek Shah Apr 01 '18 at 19:50

How to prevent HTML elements from going under the header in react

0 Answers0