I have the following navbar:
<nav class="navbar fixed-top navbar-expand-sm navbar-light">
<div class="container-fluid">
<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 me-auto ">
<li class="nav-item">
<a class="nav-link link-light active" href="#a">A</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="#b">B</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="#c">C</a>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to do is that in case the display resolution is big enough for it to appear as not collapsed, then if the user's scroll Y isn't on top, the navbar will appear as collapsed (no matter the display size), this is what i'm trying using js, but it's not working and i wasn't successful in finding something helpful on how to control the actual navbar state (collapsed\not collapsed)...appreciate any help.
let navcollapse = document.getElementById('navbarSupportedContent')
window.addEventListener('scroll', (e) => {
if(window.scrollY == 0) { // top position
// open the navbar
} else {
navcollapse.collapse = 'hide'; // collapse it
}
});
-if display is small for it to be collapsed by default then nothing changes and navbar will remain in collapsed state no matter if scroll Y is on top or not.
Just when the idea of changing the Sass file grid-breakpoints came to mind, I stumbled on a bootstrap break point that I wasn't familiar with... the 'XS', which will collapse the navbar on big screens since it'll do that for dimensions bigger than or equal to 576px (while the 'SM' break point takes effect on dimensions smaller than 576px so if the screen is small enough, the navbar will stay collapsed either way as requested).
Anyways, this is the code for collapsing the navbar (added an ID for the nav element in html file, the js code):
JS code:
window.addEventListener('scroll', function() {
if (window.scrollY == 0) { // top position - expand navbar
document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-xs');
document.getElementById('navbarscroll-spy').classList.add('navbar-expand-sm');
} else { // scrolled - collapse navbar
document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-sm');
document.getElementById('navbarscroll-spy').classList.add('navbar-expand-xs');
}
}
html:
<nav id="navbarscroll-spy" class="navbar fixed-top navbar-expand-sm navbar-light">
<div class="container-fluid">
<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 me-auto ">
<li class="nav-item">
<a class="nav-link link-light active" href="#a">A</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="#b">B</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="#c">C</a>
</li>
</ul>
</div>
</div>
</nav>
Related
I have 2 probelems.
Problem-1: I am trying changing navbar background color when scrolling to bottom. I am trying to add the class but it couldn't override the bootstrap !important attribute. but I have override it using this line:
nav.scrolled {
background-color: #e8e4e1 !important;
box-shadow: 2px 10px 4px var(--section-bg-light);
}
problem-2: how to change navbar background with javascript while scrolling to the bottom of the page, footer of the page?
let navbar = document.querySelector('.navbar');
let section = document.querySelectorAll('section');
section.addEventListener('mouseover', addIt);
function addIt() {
navbar.classList.remove('bg-transparent');
navbar.classList.add('bg-dark');
}
nav.bg-dark {
background-color: #e8e4e1 !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./img/logo-min.png" alt="JN-Fashion-Zone"></a>
<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">
<li class="nav-item home">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
Please check out How to override !important?
You need to use high specificity to override the !important rule.
Try adding more levels to your selector.
var nav = document.querySelector('nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
nav.classList.add('bg-info', 'shadow');
} else {
nav.classList.remove('bg-info', 'shadow');
}
});
I am trying to make the Bootstrap 4 navbar only use vanilla js vs any jQuery. So far I've been able to get the toggler to trigger the nav to collapse and close on mobile. What I am now trying to figure out is how to make the navbar collapse when you click on a "nav-link"
Here is my HTML for the nav:
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</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" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Browse Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Contact</a>
</li>
</ul>
</div>
</div>
And my JS for the collapsing
(function () {
"use strict";
document.querySelectorAll("button.navbar-toggler")[0].addEventListener("click", function (event) {
var target = this.getAttribute("data-target");
var subbar = document.querySelectorAll(target)[0];
subbar.className = (subbar.className + " show").replace(/ show show/, "");
});
})();
But how do I make it so when a user clicks a <a class="nav-link" href="#"></a> it'll also collapse the navbar?
Thanks!
Since you are using custom code, it's unnecessary to have the target (data-target="#navbarResponsive") on the html. So we can rewrite the click handler to handle both elements, the toggler and the links. To toggle a class just use the method toggle on classList.
document.addEventListener("click", function(event) {
if (event.target.classList.contains("navbar-toggler-icon")) {
document.getElementById("navbarResponsive").classList.toggle("show");
} else if (event.target.classList.contains("nav-link")) {
document.getElementById("navbarResponsive").classList.remove("show");
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" 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">
<li class="nav-item"><a class="nav-link" href="#about">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Browse Menu</a> </li>
<li class="nav-item"> <a class="nav-link" href="#visit">Contact</a> </li>
</ul>
</div>
</div>
</nav>
A possible solution for your question is to find all the .nav-links and add a click listener to remove the show class from the class list.
Also, you could simplify a bit your code using Element.classList.toggle(), something like:
(function() {
let subbar = document.getElementById("navbarResponsive");
document
.querySelectorAll("button.navbar-toggler")[0]
.addEventListener("click", function(event) {
subbar.classList.toggle("show");
});
for (let navItem of document.querySelectorAll("a.nav-link")) {
navItem.addEventListener("click", function(event) {
subbar.classList.remove("show");
});
}
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-white fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</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" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Browse Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visit">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Currently I am building a navigation bar using Bootstrap v4 and I found out that the animation during collapsing in responsive view is not right.
Hence, I inspect the specific navigation bar and I found out that the classes (.in and .show) are in the same elements when I toggle the collapsible content.
Is there any solution on it through JavaScript or by overriding CSS?
For your information, here are the inspection of my navigation bar.
https://i.imgur.com/f4R48gv.jpg
TQ.
EDIT :
<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
</ul>
<div class="navbar-nav">
<a class="nav-item nav-link px-3" href="#">SIGN IN</a>
<div class="divider"></div>
<a class="nav-item nav-link px-3" href="#">SIGN UP</a>
</div>
</div>
</nav>
Here are the jsfiddle link to the file.
https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/
you are including bootstrap version 3 on top of your file and bootstrap version 4 at the end of your file... same with jQuery. Scripts should be added only once.
This question already has answers here:
Bootstrap 4 navbar with 2 rows
(3 answers)
Closed 4 years ago.
I want to position the navbar-brand and nav-items on 2 different rows.
The navbar brand on the first row and the nav-items on the second row.
Current code:
<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="#">Disabled</a>
</li>
</ul>
</div>
</nav>
To achieve the desired effect, do this:
Add the flex-column to the navbar like shown in the code snippet below. (This turns the navbar into a flex-column which is what enables the desired stacking behavior in this case.)
If you don't want the items centered and want them left-aligned instead, add the align-items-start class to that as well.
To align the navbar-brand with the items (in this case), add the ml-2 class (margin-left: 2 units) to the navbar-brand.
To ensure that things behave "normally" (= in the usual way) when the navbar is collapsed, you need to modify 2 classes from above. So, if you have navbar-expand-lg as in the example below, you need to change flex-column to flex-lg-column to ensure that the switch to flex-column only happens when the screen is large (lg) or larger. And then change the ml-2 class to ml-lg-2 to ensure that the left margin on the navbar-brand only gets modified for those larger screens and is set to default for smaller screens.
Click "run code snippet" below and expand to full page:
<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar flex-lg-column align-items-start navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-lg-2" 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="#">Disabled</a>
</li>
</ul>
</div>
</nav>
I am trying to float only select nav-items to the right with .justify-content-end
This works fine if I add it to the top level div class but if I create a special div with isolating one nav-items and use that class it does not work:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<div class="justify-content-end">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</div>
</ul>
</div>
</nav>
While .justify-content-end works this way, it moves all the items which I do not want, hence me trying to Isolate the specific nav-item:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</ul>
</div>
</nav>
Here is a codepen to test on
.justify-content-end pushes the .navbar-nav to the end since it's the only child.
Instead, you can try forcing the .navbar-nav to grow to full-width by applying flex-grow: 1 to it. Then, apply margin-left: auto; to the item you want to push to the right. Luckily, bootstrap has a utility class for the latter – .ml-auto.
Updated Codepen