I have a standard bootstrap navbar and there are two options or behaviours.
When the screen is wide enough then all menu elements are visible
When the screen is small then all elements go under the hamburger icon.
How can I create a third option to hide menu elements one by one if the screen is resizing until it reaches mobile width?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">Disabled</a>
<a class="nav-item nav-link" href="#">More</a>
<a class="nav-item nav-link" href="#">More Menu</a>
<a class="nav-item nav-link" href="#">Another One</a>
<a class="nav-item nav-link" href="#">Third</a>
</div>
</div>
</nav>
You can do standard Bootstrap display classes like d-none d-md-block in the navbar and just reverse that in the hamburger menu, d-md-none...
or media queries if you want a more specific screen size adjustment.
Related
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 have copied the navbar code from the Bootstrap 4.6 navbar documentation, and I just added an icon at the beginning of the navbar.
The problem is that whenever I decrease the size of the window and the collapse starts applying the anchor "smile" gets pushed into the middle, I want it to stay in its place after the collapse applies.
What caused this problem and how can I fix it?
My code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<i class="far fa-laugh-beam text-white mt-1"></i>
<a class="navbar-brand ml-2" href="#">Smile</a>
<button class="navbar-toggler" 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">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Without css code i can just guess. But i think it looks like justify-content:space-between;
Try to gave one of your classes in <nav> just justify-content:flex-start; or check it inline with <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="justify-content:flex-start;">
I am trying to have a fixed vertical Bootstrap NavBar on the left side of the screen for large screens and have it collapse into a NavBar button for smaller screens.
I have tried placing the Bootstrap NavBar inside of a column but the list items continue to expand horizontally.
How do I make the list items stack vertically on top of each other instead of side by side horizontally when expanding the page?
<div class="col-lg-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
You can use CSS and change the flexbox direction to column for .navbar class and collpase ul element like this. Please note the importance of using #media query to limit that behaviour to the desktop (large screens) using bootstrap limits for responsiveness found here so we will use 1200px. https://getbootstrap.com/docs/4.1/layout/overview/
#media screen and (min-width:1200px) {
.navbar, .collapse ul {
flex-direction:column!important;
}}
https://codepen.io/larrytherabbit/pen/VwjwwoV
Whenever I click on the hamburger menu icon it collapses with the nav-items! what should I do to fix this issue now?
Navbar
<header>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12">
<nav class="navbar navbar-toggleable-md fixed-top d-flex justify-content-center">
<a class="navbar-brand animated heartBeat delay-.5s" href="#home"><img class="img-fluid logo"
src="./Assets/Logos/LogoMakr_8A9Y2n.png" alt=""></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#vesco-menu" aria-controls="vesco-menu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars"
style="color:#fff; font-size: 30px; "></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="vesco-menu">
<div class="navbar-nav nav nav-pills animated fadeInRight delay-1s">
<a class="nav-item nav-link active" href="#home">Home <span
class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#project">portfolios</a>
<a class="nav-item nav-link" href="#skills">skills</a>
<a class="nav-item nav-link" id="downlink" href="./Assets/RESUME.docx"
download>Resume</a>
<a class="nav-item nav-link" href="#testimonials">Testimonials</a>
<a class="nav-item nav-link" href="#contact">CONTACT ME</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
In my machine it works fine, I think the problem is in your custom CSS but I show one class that not exist in bootstrap 4 so I suggest you to replace it.
Replace navbar-toggleable-md with navbar-expand-md
So I am trying to make a Boostrap 4 navbar to fit in a full width container,but I want to navigation bar items to be centered, like in a normal container.
<div class="container-full">
<nav class="navbar navbar-expand-lg position'navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
I can't figure out what to modify.
You need to place a .container inside the nav element:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-full">
<nav class="navbar navbar-expand-lg position'navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</nav>
</div>