semantic-ui-react Content goes under the menu when it's stackable

Question

I have a main component

return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <List>
          {accounts.map(account => (
            <List.Item key={account.id}>
              {account.id}
            </List.Item>
          ))}
        </List>
      </Container>
    </>
  );

That contains a NavBar

import React from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';

export default function NavBar() {
    return (
        <Menu inverted fixed='top' stackable>
            <Container>
                <Menu.Item header>
                    <Icon name='chess pawn' size='large' />
                    Menu 1
                </Menu.Item>
                <Menu.Item name='Menu 2' />
                <Menu.Item name='Menu 3' />
                <Menu.Item name='Menu 4' />
                <Menu.Item name='Menu 5' />
            </Container>
        </Menu>
    )
}

This looks alright on desktop

but on mobile resolutions when the Menu stacks and some content goes behind it.

Is there any elegant way to address this issue?

Answer 1

In semantic-ui, when using fixed='top' on Menu, it is taken out of the flow of document due to position: fixed, which allows other content to go under it.

It is also the reason why a higher marginTop was needed on the content container to create some space on top.

Instead of fixed='top', try use a custom class (or inline style) for NavBar to apply position: sticky on it, so it is placed considering the flow but still stays in view as the window scrolls.

More about position: sticky

Live demo of the minimized example: stackblitz

Example:

.custom-nav {
  position: sticky;
  top: 0;
}

Add the className to NavBar:

import React from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';

export default function NavBar() {
    return (
        <Menu inverted stackable className="custom-nav">
            <Container>
                <Menu.Item header>
                    <Icon name='chess pawn' size='large' />
                    Menu 1
                </Menu.Item>
                <Menu.Item name='Menu 2' />
                <Menu.Item name='Menu 3' />
                <Menu.Item name='Menu 4' />
                <Menu.Item name='Menu 5' />
            </Container>
        </Menu>
    )
}

Alternatively, perhaps a sticky component by semantic-ui can be used to wrap NavBar for the same result, although it seems that it would result in an additional wrapper in the structure.

Hope this will help.