BootstrapVue: Creating 2 Navbars with Bottom Navbar that Sticks to the Top?

user_8309944 0
Viewed 2361

What I'm trying to do is create 2 navbars. The first (top navbar) is just a brand (logo). The second (bottom navbar) is a navigation menu. When the user scrolls down, I want the top navbar to scroll off the screen, but I want the 2nd (bottom) navbar to stay fixed at the top of the screen. I've set up each navbar as a separate component.

A good example of this behavior can be found on Reason.com: link

I'm very confused on how to implement this. I can do:

<b-navbar toggleable="lg" class="header" fixed="top">

To make the navbar stay at the top of the screen. This works well if I want the 1st navbar to stay at the top but not the 2nd. However, it doesn't work for my situation.

The docs mention placement for the navbar. The only other option (other than fixed="top") is to set the div's position to sticky in css:

position: sticky

However, this only impacts it within the div. Since I have several components, I'm not sure how to implement this properly in Vue since I can't carry over one div from one component to another.

How might I go about doing this?

bootstrap-vue bootstrap-4 vue.js css html
1 Answers

I was playing with a BootstrapVue codesandbox. I just put 

<b-navbar>
....
</b-navbar>

<b-navbar sticky>
....
</b-navbar>

and was able to replicate that behaviour.

Edit:

Link if you want to see it.

user_12944050
Related