semantic-ui segment is not covering the whole menu when menu fixed to top

Question

I'm trying to create a menu fixed to the top of the page:

<Segment inverted>
   <Menu fixed = "top" inverted pointing
       secondary stackable size="large" >
     <Container>
       <Menu.Item as="a" name="Item1">
       <Menu.Item as="a" name="Item2">
     </Container>
   </Menu>
</Segment>

When the Menu fixed to top the surrounding Segment is sized smaller than the embedded Menu (and also not fixed to top).

What's the proper way to do it?

Demo on codepen

Answer 1

You shouldn't use secondary and inverted at the same time. If you remove secondary attribute, I think you'll see the results.

Also you can add a custom class to the content Segment so if the Menu is fixed, adding a margin-top: 32px; (or any size you want) to the content Segment.