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>
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 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>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
This is the navbar in html made with BootStrap. but somehow it does not show up on the mobile any tips of how to change this? I have tried a lot and I looked over previous questions aswell but nothing helped
As you can see in the Bootstrap 5 docs...
"Navbars can use .navbar-toggler, .navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their
content collapses behind a button"
Your code is missing the toggler...
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
Also note the data attributes have changed in Bootstrap 5
I have navigation bar that collapses on windows resize. Besides the usual stuff in nav bar like about, contact...etc, i have two social media links (facebook and twitter). After i resize window, both of the social media items jump to the right of collapsed bar and also show up in the "dropdown" of the collapsed bar.
I would like for the social media items to show on the left of the so called dropdown button and for them to not show up in the collapsed bar.
I've tried this by sourcing them outside of collapsed bar div, but nothing changes.
Any help?
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
</div>
</nav>
For visual:
https://jsfiddle.net/8ay2g0tL/3/
Thank you!
RESULT
im not sure if this is the best practice or not, but the way i finally was able to hide it from collapsed navbar is by setting it to display: none
like this:
#media only screen and (max-width: 998px) {
#navbarfbtw{
display:none;
}
}
Just wrap the class="navbar-social" inside the parent class="collapse navbar-collapse", Also there is no reason to use <div class="navbar-social"> so just add social li items (with navbar-social class) in the parent ul element like this:
Updated JsFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item navbar-social">
</li>
<li class="nav-item navbar-social">
</li>
</ul>
</div>
</div>
</nav>
It's to do with the order in which the elements are rendered on the page.
The collapsed menu is being "un-hidden" and shunting your icons out of place.
Simply put the "navbar-social" div BEFORE the "navbarForCollapse" div.
https://jsfiddle.net/16x8jhu4/9/
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
So I've looked at dozens of posts about this kind of issue and haven't been able to find the answer. I am having an issue with my navbar menu toggle on collapse. When the browser width is smaller, the menu button shows, but clicking on the menu button does nothing. I need it to display the menu list, obviously. Here's the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm bg-faded navbar-fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a id="header-initials" class="navbar-brand" href="home">JT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
Put the <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> after the <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I've tested the above changes. It will work.
Hi have you added the bootstrap.min.js to your code?
if not
add this code after jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
hope this helps
You have to need call bootstrap.js before closing </body> tag along with other JavaScript file. Example here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm bg-faded navbar-fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a id="header-initials" class="navbar-brand" href="home">JT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>