Designing dual navigation bars with Bootstrap 4

Is it possible to achieve two different navbars using Bootstrap 4.3.x as shown in the image below?

The first navbar (with "Sample Brand") fixed at the top, and the second navbar scrollable.

https://i.sstatic.net/mmm0P.png

I'm not certain if there is a built-in Bootstrap utility that can handle this specific layout.

I've attempted adding 'margin-top: 56px' to the second navbar to create space, but this workaround only works effectively on larger screens because of the height change when the burger menu icon appears on the first navbar.

Here is my current code:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Login
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<nav class="navbar navbar-expand-lg navbar-dark p1-primary static-top" style="margin-top: 56px">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item font-weight-lighter">
                    <a class="nav-link" href="#">FAQs</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Developer</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

This setup functions properly on large screens, but presents issues on smaller and medium-sized screens, as depicted here:

https://i.sstatic.net/zdke1.png

Determining the appropriate margin-top value is challenging due to the variable height of Bootstrap's navbar components.

If feasible, I prefer avoiding javascript solutions and instead seeking a css workaround (even though I may not be aware of it yet!). This is to avoid unnecessary complexity through JavaScript implementation. 😄

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Your secondary navigation bar is currently set to 'navbar-expand-lg', causing it to switch to the collapsed view at the medium breakpoint. If you wish to keep it expanded, you can adjust the expand breakpoint by changing it to 'navbar-expand-md', 'navbar-expand-sm', or simply 'navbar-expand' for all viewport sizes

Here is an example with the secondary navbar expanded across all viewports:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1P" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Login
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<nav class="navbar navbar-expand navbar-dark bg-primary static-top" style="margin-top: 56px">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>

                <li class="nav-item font-weight-lighter">
                    <a class="nav-link" href="#">FAQs</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Developer</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer №2

Here is a situation that resembles the Bootstrap 4 Multiple fixed-top navbars question on Stack Overflow, with the exception of having a static 2nd Navbar that maintains its margin-top properly.

However, the issue arises when testing on smaller and medium-sized screens, as the 2nd Navbar loses its height due to the absence of a navbar-brand element. The desired behavior is for the 2nd Navbar not to collapse at all and remain expanded.

<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
    <div class="container">
        <a class="navbar-brand" href="#">
            Sample Brand
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                ...
            </ul>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand bg-primary navbar-dark p1-primary static-top" style="margin-top: 56px">
    <div class="container">
        <ul class="navbar-nav ">
            ...
        </ul>
    </div>
</nav>

View the solution here:

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

The property value entered is not valid

Attempting to apply the CSS properties to the element: url('example.png') center center 100% 100% no-repeat Encountering an error message: Invalid property value The format of the background property values should be: background: color position ...

cssbackground

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax

Guide to generating a PDF file and utilizing a Node.js program for the download process

Seeking assistance in creating a button using my Node.js application to generate a downloadable PDF file filled with information from a PostgreSQL database. Any help is greatly appreciated! ...

javascripthtmlnode.jspostgresql

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

javascripthtmlajaxjquery

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

Create a unique trapezoidal design using only CSS styling

Imagine having two div elements beautifully displayed as shown below. Despite consulting The Shapes of CSS, the method to create the unique yellow shape featured in the image below still remains a mystery. Is it feasible to replicate this shape using techn ...

htmlcsscss-shapes

Tips on delaying Bootstrap 3 carousel with setTimeout

I have a unique situation with my page where I have nine different carousels, each needing to start at different times. How can I achieve this? Would using the setTimeout function be the solution? Can someone provide guidance on how to make this work? Belo ...

bootstrap-4twitter-bootstrap-3carouseldelay

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

javascriptjqueryhtmlnode.js

Converting HTML to PDF using AngularJS

Can anyone help me with converting HTML to PDF in Angular? I have tried using the angular-save-html-to-pdf package from npm, but encountered errors. Are there any other solutions or custom directives available for this task? ...

htmlcssangularjspdfhtml2pdf

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

javascriptjqueryhtmlcssjquery-ui

Hide angular button when scrolling down and show it again when scrolling up

Seeking a more efficient way to display a button only on up-scroll. My current implementation involves listening for every scroll-event, which seems like it might be too computationally intensive. If anyone has a better approach, I'm open to suggestio ...

javascripthtmlcssangular

Is it possible to customize the appearance of specific characters within an input field?

One of our clients has inquired about incorporating the type="number" attribute for a credit card field to ensure the appropriate keyboard is displayed on mobile devices. However, they also want to add padding after every 4th character to mimic the appea ...

htmlcss

Having trouble with my carousel code - specifically the next and prev buttons in Bootstrap 5. Any suggestions?

Here’s the issue with my carousel: The carousel indicators are functioning properly, but the "next" and "prev" buttons are not responding. The scripts I have included are: popperjs, bootstrap-5.2.0 jquery-3.6.0. The links in my HTML element are in ...

htmljquerycsscarouselbootstrap-5

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

htmlcssmenu

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

Focus on a particular div in order to enable scrolling beyond its boundaries

Whenever I move my mouse over the div tag, I am able to scroll the content. However, if I move the mouse outside of the div box, scrolling stops. Is there a way to make the specific div element track the mouse pointer no matter where it goes? <div st ...

javascriptjqueryhtml

Utilizing numbered lists through HTML, CSS, and/or JavaScript

I am looking to accomplish something similar to this... My guess is that the images should be stored in an array in Javascript with the image links. However, I am uncertain if this can be done using only HTML and CSS. I found a solution on this thread, w ...

javascripthtmlcsshtml-lists

Leveraging the -ms-filter feature in Internet Explorer 9 can enhance the browsing

Currently, I am using visual studio 2008 for developing a web application. The CSS version being used is 2.1 and the browser version is IE9. Due to the absence of the opacity property in CSS 2.1, I have resorted to utilizing -ms-filter to ensure my code fu ...

cssasp.netinternet-explorer

"Bootstrap 4 does not allow labels to be displayed inline with the input field

I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file. <div v-for="problem in problems"> <div class="row"& ...

htmlcssvue.jsbootstrap-4label