Using Bootstrap I created a navbar. I wanted to have the navbar collapse after a clicking on a link. When adding the data-bs-toggle & data-bs-target the navbar does revert , but it breaks the link. If anyone can point out what I am doing wrong I would greatly appreciate it.
here is a demo JsFiddle
<div class="container">
<a class="navbar-brand" href="#home"><span class="logo great-vibes">Drip N Dip</span> </a>
<div class="nav-button">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</li>
</ul>
</div>
</div>
</nav>```
Had the same problem and found a workaround. Simply wrap your link names with a span-tag and the needed data-attributes.
<a class="nav-link" href="#home">
<span data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
Home
</span>
</a>
Find the original here: Adding data-toggle & data-target breaks Nav links
Related
I have this code in html and i want to show de nav items when the navbar collapse, because is not showing anything when a press the toogler button.
<div class="container-fluid ">
<a class="navbar-brand nav-color">
> $ / kromabyte /~
</a>
<span class="logo__cursor"></span>
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link nav-color " aria-current="page" href="#">index /</a>
</li>
<li class="nav-item">
<a class="nav-link nav-color" href="#about">About /</a>
</li>
<li class="nav-item">
<a class="nav-link nav-color" href="#">Portfolio /</a>
</li>
<li class="nav-item">
<a class="nav-link nav-color">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
You can try to change these props for the toggler button:
data-bs-toggle="collapse" to data-toggle="collapse"
data-bs-target="#navbarNav" to data-target="#navbarNav"
Hope this can help.
I tried to make an responsive bootstrap navigation bar but something isn't working. I even copy/paste the bootstrap navbar example and still the button doesn't show the menu when I click on it.
Can you help me solve it ?
<div class="header">
<nav class="navbar navbar-expand-lg cust">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fa-solid fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
this is working properly. This is Bootstrap-5. Please use data-bs-toggle and data-bs-target insted of data-toggle and data-target
Please Check This Code
I hed Two changes in your code.
This Is Bootstrap v4.0.0
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
enter image description here
<nav class="navbar navbar-expand-sm navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
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 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
order
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact
</a>
</li>
</ul>
</div>
</nav>
I can't center the nav-items. It would align to the right even when I put mx-auto. I tried margin-left but then it wouldn't be responsive. It would only center navbar-nav but not the item inside of them. How would I fix this? Thank you
You can these classes,
text-center or container-fluid or use flex box flex justify-center
You can use "display: flex" and "justify-content: center" which might help you to solve this issue. If you want to align the text, you can use "text-align: center".
Hi I have just one of my navbar links that aren't working and I can't seem to resolve it myself. I have included my nav code and it's the pricing section that won't work and I have the section id as #pricing
https://codepen.io/hollyj24/pen/eYZWgwb
<nav class="navbar navbar-expand-lg">
<img class="navbar-brand" src="images\logo.png">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" 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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#pricing">Pricing <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
I looked at your code in CodePen. In line 111, you have said:
<section id="#pricing">
Remove the hashtag, and it should work. This is saying that the id of this section is #pricing, when you want it to be pricing.
Just to understand it better, on line 37, change it to:
<a class="nav-link" href="##pricing">Pricing <span class="sr-only">(current)</span></a>
This will also work, but this isn't what you want. Change line 111 to <section id="pricing">.
Remove id # from pricing Section on line 112
id="#pricing"
write
id = "pricing"
I'm tinkering with a nav in bootstrap 4, building instead of templating, and for some reason my dropdowns just aren't working. I click them and they take me to the whatever site I've got plugged in, instead of showing me options to choose. For that matter, my toggler for the hamburger isn't working either. Any ideas?
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #0E0B16;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="home.html">EX</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-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="bio.html">Bio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownPortfolio">
<a class="dropdown-item" href="filmportfolio.html">Film</a>
<a class="dropdown-item" href="stageportfolio.html">Stage</a>
<a class="dropdown-item" href="beautyportfolio.html">Beauty</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-sub pull-right">
<li class = "navbar-text"><i class="fa fa-phone" aria-hidden="true"></i> 555-555-5555</li>
<li class= "navbar-text"><i class="fa fa-envelope-o" aria-hidden="true"></i> ex#example.com</li>
</ul>
</div>
</nav>
Without seeing the full page code, this is only an educated guess, but, it sounds like you left out jquery and/or bootstrap.js/bootstrap.min.js. The hamburger show/collapse and dropdowns depend on that .js file.