sui-sidebar-container with fixed menu is not fixed

[imaress]

I want a layout with a fixed menu with a sidebar, my code in my app.component.html is:

<sui-sidebar-container>
  <sui-sidebar class="vertical menu" #sidebar>
  </sui-sidebar>

  <div class="ui top fixed stackable menu">
    <a class="item" (click)="sidebar.toggle()">
        <i class="sidebar icon"></i>
    </a>
  </div>

  <sui-sidebar-sibling [isDimmedWhenVisible]="true" class="ui padded basic segment">
    <router-outlet></router-outlet>
  </sui-sidebar-sibling>

</sui-sidebar-container>

It works but the fixed menu not remains at the top of the page, the menu is moving when scroll the page. To fix this I added a style: <sui-sidebar-container style="display:inherit"> ... because with the sui-sidebar-container the display style is block. I want the default behavior out of the box (menu fixed at the top) and i go to be very happy if you fix this, thanks for all effort!!

[edcarroll]

Hi, thank you for opening an issue 😄 Please could you set up a basic plunkr so I can play around with your example to see exactly what is going on? Thanks!

[PapsOu]

@edcarroll : I've the same problem but I cannot create a plunker that work with ng2-semantic-ui.

[PapsOu]

@edcarroll : I've found a workaround :

<!-- app.component.html -->
<sui-sidebar-container>
  <sui-sidebar id="mainSidebar" class="inverted vertical" #sidebar transition="overlay">
    <a routerLink="/" routerLinkActive="active" (click)="sidebar.toggle()">Home</a>
    <!-- Put very long content to allow sidebar scrolling -->
  </sui-sidebar>
  <sui-sidebar-sibling [isDimmedWhenVisible]="false">
    <!-- Put very long content to allow page scrolling -->
  </sui-sidebar-sibling>
</sui-sidebar-container>

// app.component.scss
sui-sidebar-container {
    sui-sidebar-sibling {
        position: absolute;
        top: 0;
    }

    sui-sidebar,
    &.pushable:not(body)>.fixed, 
    &.pushable:not(body)>.pusher:after, 
    &.pushable:not(body)>.ui.sidebar {
        position: sticky;
    }
}

Hope this will be usefull for you or other person who have the same wrong behavior.

[dwsmall]

The issue lies with not using the "pusher" element for your container which is native to Semantic UI. It is better to use Semantic UI CSS references than creating your own. So just adding "pusher" class as overall container will help you to achieve this.