How to Build Two Navbars in BootstrapVue with a Sticky Bottom Navbar at the Top

My current project involves creating two navigation bars. The first navbar at the top consists of just a brand logo, while the second navbar at the bottom serves as the main navigation menu. I want the top navbar to scroll off the screen when users scroll down, but I need the second (bottom) navbar to remain fixed at the top of the screen. Each navbar is set up as a separate component in my project.

If you'd like to see an example of this behavior, visit Reason.com: link

I'm having trouble figuring out how to implement this. I have tried using the following code:

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

This code successfully keeps the 1st navbar fixed at the top, but it doesn't meet my requirements for the 2nd navbar. I've checked the documentation on placement options, which only includes fixed="top". Another option mentioned was using CSS property sticky:

position: sticky

However, this approach only works within the div and doesn't extend across components. Since I'm working with multiple components, I'm unsure how to properly apply this technique in Vue without carrying over a single div from one component to another.

Does anyone know how I can achieve the desired navbar behavior in my project?

htmlcssvue.jsbootstrap-4bootstrap-vue

Answer №1

Exploring the functionalities of a BootstrapVue codesandbox provided some interesting insights for me. Here is a snippet of code that caught my attention:

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

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

By replicating this code, I was able to observe the behavior in action.

Update:

For those interested in seeing it live, you can check out this Link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue3 compilation error: Every single file component must include at least one <template> or <script> block

Attempting to update a large existing codebase from Vue2 to Vue3 with the help of Webpack. I have successfully upgraded the necessary packages in package.json, which now looks like this (no issues encountered): "vue": "^3.2.45", "@vue/compat": "^3.2.45", " ...

vue.jsvue-loadervue-sfc

Wide container using Bootstrap

Currently, I am incorporating Bootstrap v5 alpha to develop a basic dashboard. According to Bootstrap guidelines, it is essential to utilize .container, .container-fluid, or .container-{size}, followed by .row and .col columns. However, I wish for the das ...

csstwitter-bootstrapbootstrap-4sass

How can I target all ul elements except those contained within a div with a specific class using CSS?

In my global.scss file, I have defined global styles for ul elements as shown below: ul { list-style: none; margin: 0; padding: 0; } However, I am trying to find a way to style all ul elements except those within a specific jodit-wrapper class ...

htmlcsssass

What's the best way to combine cells using HTML, CSS, and PHP?

Can anyone assist me with merging cells containing identical values in specific columns? <td style="text-align: center; font-size: 9.5px;">{{$endereco->quadra}}</td> <td style="text-align: center; font-s ...

phphtmlcss

Creating a CSS Grid with Full-Width Columns and Consistent Margins

Currently, I am attempting to create a responsive grid with 4 columns that expands to the entire width of the screen on desktop displays. However, when I introduce margins to space them out evenly, I encounter an issue where the last column either doesn&ap ...

htmlcssgrid

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

javascripthtmlangularjsapiangularjs-ng-repeat

Tips for changing the content of a td element to an input field and removing the displayed value

I am facing an issue with a dynamic table that displays names and input fields. When a name is displayed in a table row, the user has the option to delete that name. I am able to remove the value from a specific table row, but I am struggling to replace th ...

javascriptjqueryhtml

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

Issues with the parallax zooming out effect

Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height. In the example pr ...

jqueryhtmlcssparallaxzooming

Combining 2 objects in vue.js that share a common field name

Currently, I am attempting to merge two objects based on a shared key, specifically when they have two fields with the same name but differing values. var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : &quo ...

javascriptnode.jsvue.jsjoin

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

javascriptjqueryhtmlcssjoomla2.5

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Scrolling up occurred upon opening the bootstrap modal

When a model is opened, the page automatically scrolls to the top and remains at the top when the model is closed. This HTML uses the Blade engine: <div class="row mt-0 name"> <a class="text-wrapper text-xs inviteeModel ...

htmlbootstrap-modallaravel-bladebootstrap-5

Unable to modify border color for Material-UI OutlinedInput

Having some trouble changing the border color of a v4.13 MaterialUI Outlined Input. No luck with CSS overrides. Tested multiple CSS rules targeting different elements, such as select and OutlinedInput. Here are my latest attempts. What am I missing? cons ...

javascriptcssreactjsmaterial-ui

Error in Vue.js: When using v-for, it is not possible to read a property

I'm working on creating multiple FAQ boxes using a list of objects containing questions and answers. However, I keep encountering the error message "Cannot read property 'question' of undefined." What could be causing this issue? Here's ...

vue.jsv-for

Best practices for refreshing the HTML5 offline application cache

My website utilizes offline caching, and I have set up the following event handler to manage updates: applicationCache.addEventListener('updateready', function () { if (window.applicationCache.status == window.applicationCach ...

javascripthtmlhtml5-appcache

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Is jQuery Mobile Autocomplete's search feature activated after typing 3 letters?

Hello there, I am in the process of creating a website and have implemented an autocomplete field. However, I am facing an issue due to having over 1000 <li> elements within the <ul>, making it slow especially on mobile devices. I would like t ...

javascripthtmljquery-mobileautocomplete

The JQuery mobile navigation menu effortlessly appears on your screen

I am experiencing an issue with a JQuery mobile navigation that is designed for screens @979 pixels wide. The problem arises when the screen is resized to 979px - the menu pops up fully extended and covers the content of the web page. I suspect that this ...

javascriptjqueryhtmlmobilejquery-mobile-navbar

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui