Semantic-ui-react: Fixed menu inside a Sidebar pushable?

[RhanCandia]

I've been stuck here. Basically, I added a fixed menu inside a sidebar pushable like so:

Sidebar.js

<Sidebar.Pushable as={ Segment }>
    <Sidebar as={ Menu } animation="overlay" width='thin'
             visible={ app.sidebarVisibility } icon='labeled'
             vertical inverted>
        <Menu.Item onClick={ () => ( app.sidebarVisibility && onToggleSidebar() ) }
                   as={ NavLink } exact to="/">
            Home
        </Menu.Item>
        <Menu.Item onClick={ () => ( app.sidebarVisibility && onToggleSidebar() ) }
                   as={ NavLink } to="/menu">
            Menu
        </Menu.Item>
    </Sidebar>
    <Sidebar.Pusher onClick={ () => ( app.sidebarVisibility && onToggleSidebar() ) }>
        <Container className="Main-container">
            <Segment basic>
                <NavBar app={ app } onToggleSidebar={ onToggleSidebar } />
                { children }
            </Segment>
        </Container>
    </Sidebar.Pusher>
</Sidebar.Pushable>

NavBar.js

<Menu borderless fixed="top">
    { app.device && app.device.type === 'mobile' &&
    <Menu.Item>
        <Button basic icon="sidebar"
                onClick={ () => ( !app.sidebarVisibility && onToggleSidebar() ) } />
    </Menu.Item>
    }
    <Menu.Item header>Krispy Kreme</Menu.Item>
    { app.device && app.device.type !== 'mobile' &&
    <Menu.Menu>
        <Menu.Item as={ NavLink } to="/" exact>Home</Menu.Item>
        <Menu.Item as={ NavLink } to="/menu">Menu</Menu.Item>
    </Menu.Menu>
    }
    <Menu.Menu position="right">
        <Menu.Item>
            <Button basic icon="cart" label={ <Label color="red"> { cartItems } </Label> } />
        </Menu.Item>
    </Menu.Menu>
</Menu>

EDIT:

I was able to fix it by using flex layouts.

Basically, I had to make the Segment component inside the Sidebar.Pusher use display: flex with flex-direction: column so I can lay the contents properly. Then I gave it two children, the NavBar and the Content. I gave Content a flex-grow: 1 property. Now The header stays on top. Here's how it looks like now:

<Sidebar.Pusher onClick={ () => ( app.sidebarVisibility && onToggleSidebar() ) }>
    <Segment basic>
        <NavBar app={ app } onToggleSidebar={ onToggleSidebar } />
        <Content>
            { children }
        </Content>
    </Segment>
</Sidebar.Pusher>

[RhanCandia]

I got what I want by using flex.

[mairh]

@RhanCandia It would be nice to update the issue with the correct answer so that other people can follow it in the future.

[RhanCandia]

@mairh I updated my opening post to explain how I fixed it. Thanks for reminding me.

[Shurlow]

@RhanCandia I am having the same issue but your solution isn't working for me. Any chance you could post the full code, including css? Thanks!

[tiagowippel]

I was unable to use this solution too.

[Roshini369]

@RhanCandia Can you upload the full code. I am facing the problem of fixed=top menu not working in navbar. it would be nice if you show the code of adding flex alone of content used inside sidebar.pusher