Search code examples
twitter-bootstrapvuejs2navbarstickybootstrap-vue

Sticky Navbar doesn't work in bootstrap-vue when using in a component


I'm working with bootstrap-vue and as you can see in jsfiddle, sticky property is working correctly when used in navbar.

The problem is when I move this navbar to a separate component and call it, sticky attribute fails to work correctly.

<b-navbar toggleable="lg" type="dark" variant="info" sticky>
   <b-navbar-brand href="#">NavBar</b-navbar-brand>      
</b-navbar>

fixed="top" is still working when using as a component.

<b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
   <b-navbar-brand href="#">NavBar</b-navbar-brand>      
</b-navbar>


Solution

  • CSS position: sticky is not supported by all web browsers. Using the latest Chrome, your fiddle is working for me though.