I'm working with a Bootstrap Navbar, and it looks generally okay, however on mobile it opens, but will not collapse once opened. I checked to make sure all the classes were right and made sure everything is where it should be. Is there something I'm missing?
Here is the code for the navbar. It's inserted onto the page as an E.js partial.
Any help would be appreciated. Thanks!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-light navbar-expand-md sticky-top navbar-shrink py-3" id="mainNav">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/"><img src="https://via.placeholder.com/220x102" width="220" height="102"></a>
<button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="/store">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
</ul>
<a class="btn btn-primary shadow" role="button" href="/checkout/cart">Cart</a>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Related
I am trying to center a navbar in Bootstrap 5, but without success. I want both the logo and the links to all be centered, but the navbar is still collapsed via the navbar toggler if the screen is too small.
Here is my code:
<nav class="navbar navbar-light navbar-expand-md justify-content-center">
<div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div id="navcol-1" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
</div>
</div>
</nav>
I've been watching tutorials like this one: https://www.youtube.com/watch?v=1quNxUhmZNQ
But I think there is a simpler solution that I just can't come up with at the moment.
Any help is appreciated.
Follow what's the video is showing :
add justify-content-center to container-fluid
add flex-grow-0 to navbar-collapse
add text-center to navbar-nav
After applied to your code and below is the result and I believe this is the simplest method of overwrite the default nav CSS to achieve what you want.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid justify-content-center">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
<span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span>
</button>
<div id="navcol-1" class="collapse navbar-collapse flex-grow-0">
<ul class="navbar-nav text-center">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
</div>
</div>
</nav>
I'm starting my studies in fullstack and we were just shown bootstrap. I'm doing this site responsive, and I modified the menu bar to my please. The only thing I'd like to change is the menu to colapse into the toggle button only below 600px-ish wide (aka for phones). Any assistance will be appreciated
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Academia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tienda</a>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
As mentioned in the How it works section of Bootstrap navbar documentation, you can use navbar-expand-sm instead of navbar-expand-lg. This will collapse the navbar only on screens smaller than 576px(sm).
So im trying to create some navbar using bootstrap and make it able to collapse but it won't work
please help
This are my line of codes:
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="WebLogo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Location</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Connect</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary">Sign in</button>
</li>
</ul>
</div>
</div>
</nav>
Appreciate it for the help, thankyou
You must add jQuery and popper.js link or file to your project
jQuery
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
visit bootstrap document
I have followed the instruction on the navbar,but when the toggle button is clicked it doesn't show the pages.What could be the issue?I am working on windows 10.
Here below is the HTML code.
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
You need remove the .navbar-toggler from the button since by default its using display:none;
Then you also need to remove .navbar-collapse from the #Navbar since its forcing the item to be visible with display: flex !important.
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
Text
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
<div class="collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Double check if you added the jQuery library and Bootstrap Js. if not, you can refer to the links below.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Try this one in <button> tag
onclick="document.location='link.html'"
(link.html) should be any page that you want to open
You need to link the site you want to visit to the href.
Simply replace the # with the link of your site.
You also dont need the ./ in front of your html document if it is in the same Folder as the index.html
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="ristorante.html">Ristorante con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="menu.html">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
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?
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:
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
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>
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