1

Is is possible to create 2 different navbar's using Bootstrap 4.3.x like the image below?

With the first navbar (with Sample Brand) fixed to top, and the second navbar scrollable?

enter image description here

Not sure if there is a utility from Bootstrap I can use to handle this.

Im tried adding a 'margin-top: 56px' on the second navbar which will give a space allowance, but this only works with large screens, as the first navbar's height will change when the burger menu icon shows.

My current code is:

<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 runs ok with large screens, but when I test it on small and medium screens, this happens:

enter image description here

Not really sure what margin-top value should I use as Bootstrap's navbar has no fixed height.

As much as possible, I do not want to do it with javascript as I think there a possible way in css (which I just dont know. Ikr haha!) and using javascript is an overkill. Hehe

Improve this question
1
  • Do you want the 2nd navbar to collapse into the toggler too? Or do you expect it to always be visible? Commented Nov 25, 2019 at 18:25

2 Answers 2

Reset to default
3

You have your secondary navbar set to navbar-expand-lg so it changes to the collapsed navbar at the md breakpoint. If you want it to stay expanded, change the expand breakpoint. e.g. navbar-expand-md or navbar-expand-sm or for all viewport sizes navbar-expand

Below is an example with the secondary nav expanded in all viewports

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This is very similar to Bootstrap 4 Multiple fixed-top navbars except the 2nd Navbar is static. The margin-top on the 2nd Navbar is fine.

However, "this runs ok with large screens, but when I test it on small and medium screens, this happens..."* is the problem, because the 2nd Navbar loses its height because it has no navbar-brand. The 2nd Navbar shouldn't be collapse at all and should be 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>

See: https://codeply.com/p/Nqhb6cszbt/option2

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.