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.
Related
I made a drop-down menu with bootstrap 4 and also change it into hover. Everything works great, but I cannot link properly through the href.
When I click "PRODUCTS", it doesn't switch to third.html.
How can I fix it?
SOLUTION
Also, how to remove the original click action since I already have the hover one?
SOLUTION
Here's my HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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">
<a class="nav-link" href="./second.html">ABOUT</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="./third.html"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
PRODUCTS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#ch1">A</a>
<a class="dropdown-item" href="#ch2">B</a>
<a class="dropdown-item" href="#ch3">C</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./fourth.html">EQUIPMENT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./fifth.html">CONTACT</a>
</li>
</ul>
</div>
</nav>
CSS:
.dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
Thanks!
I have a website with a Bootstrap navbar that has an icon on the left-hand side and an expansion menu on the right-hand side. On smaller devices, the expansion menu appears underneath the icon even when there's enough space for it on the same line as the icon. How can I stop this behaviour?
The above is how I want it to look on all small devices but the below is how it looks when the device width is less than 403px.
My code is below. So far I've tried changing the -sm on navbar-expand-sm but this just controls when the expansion button replaces the individual links it reveales.
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="/"><object data="media/bts-logo.svg" width="20%" height="20%" id="logo_url"></object></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 mr-auto">
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/account">Account</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/logout">Logout</a>
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-globe"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</li>
</ul>
</div>
</nav>
I'm learning to use Bootstrap and neither the Toggler nor the Dropdown expand, I honestly don't know if I'm doing something wrong
I'm learning to use Bootstrap and neither the Toggler nor the Dropdown expand, I honestly don't know if I'm doing something wrong.
Here is the navbar code (It's a partial, I'm using Handlebars)
<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="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Titleee</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Withepaper</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Community
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Discord</a></li>
<li><a class="dropdown-item" href="#">Telegram</a></li>
<li><a class="dropdown-item" href="#">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
you have to import bootstrap.js file also to make togglers and dropdowns, work,
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
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
I have a bootstrap 4 navigation bar.In this navigation bar i have a font awesome icon-shopping cart that i don't want to toggle(to go in that 3 lines menu) when the page pass a max-width value(the default responsive navbar from bootstrap).I would like to remain near the menu bar.How can i do this?
PS:I will put three ! where the font awesome icon is to help you seeing it.
HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
You need to group the non-collapsible items in a single div, and then use the spacing and order utilities to align it as needed.
https://www.codeply.com/go/SJia0JtI1T
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<ul class="navbar-nav flex-row">
<li class="nav-item mx-2 mx-lg-0">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
Related: Bootstrap 4 - Navbar items outside the collapse
Move your shopping cart outside of the nav collapse div and nest it and the nav collapse in a new div. Then style the shopping cart accordingly, but it won't go away with the nav collapse.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div> <!-- New Div !-->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<!-- move the anchor outside of the original div but nested inside the new div !-->
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
</div>