cant solve this simple problem,
1 - Why if I add a nav_element css idependent class and set the flex and justify-content:between to create space between the anchor tag and the div does not work?
2 - What should be this correctly approach in bootstrap?
3 - Do I need "d-flex" on navbar bootstrap property?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
Gb32
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item navbar-el">
Home
</li>
<li class="nav-item navbar-el">
About
</li>
<li class="nav-item navbar-el">
Skills
</li>
<li class="nav-item navbar-el">
History
</li>
<li class="nav-item navbar-el">
Contact
</li>
</ul>
</div>
</nav>
Thanks guys! I will try to leave a fiddle, but I'm not sure the resources will keep.
https://jsfiddle.net/guibrother32/bn1qtfuc/2/
You should never update the bootstrap classes, you need to correctly use them.
You have to use flex-grow-0 and text-right like below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
Gb32
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarMenu"> <!-- here -->
<ul class="navbar-nav text-right"> <!-- here -->
<li class="nav-item navbar-el">
Home
</li>
<li class="nav-item navbar-el">
About
</li>
<li class="nav-item navbar-el">
Skills
</li>
<li class="nav-item navbar-el">
History
</li>
<li class="nav-item navbar-el">
Contact
</li>
</ul>
</div>
</nav>
Add this
.ml-auto {
left: auto !important;
flex-basis:auto!important;
}
https://jsfiddle.net/csuzpq3o/
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 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>
I'm trying to create collapse using bootstrap and I also connected "data-target" and "id" which is navbarResponsive. I'm not sure what's wrong here.
This is my code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Please make sure your Jquery & bootstrap.js file is correctly linked with the project.
Make sure you import JQuery before bootstrap. The same example is working with the following linking:
<!-- first jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- then bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
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