Fixed menu inside a Sidebar pushable?

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>

[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.