Navbar Toggle Button Not Working in Bootstrap v4.1.3 - javascript

I am using BootstrapCDN v4.1.3 and I want my navbar to be fixed to the top of the user's browser at all times. When I set the nav div to position: fixed;, none of the links can be clicked on when the browser is in desktop mode and the navbar toggle button does not drop down when the browser is in mobile mode. As soon as I remove the position: fixed; CSS attribute, everything works in the navbar, except it is no longer positioned above the stock video and it pushes the video down when the navbar menu is toggled in a mobile browser. This is not my desired result and I would appreciate if someone could help me figure out how to get the navbar to function properly while also maintaining a fixed position at the top of the user's browser.
nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;/* <---- Causing the navbar issue */
width: 100%;
}
div.stockVideo {
padding: 0;
}
#stockVideo {
width: 100%;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/normalize.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Website</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="media/placeholderLogo.png" width="44" height="44" alt="Logo">
</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 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" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Stock video -->
<div class="container-fluid stockVideo">
<video autoplay muted loop id="stockVideo">
<source src="media/stockVideo.mp4" type="video/mp4">
</video>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Settings the navbar z-index: property to 1 fixes this:
nav.navbar {
background-color: rgba(144, 188, 244, .8) !important;
position: fixed;
width: 100%;
z-index: 1;
}
I'd also set padding-top to the height of your navbar on body like so:
body {
padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
top: 0; /* bump the header back to the top */
}

You can also try the bootstrap fixed-top class to fix the navbar like
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

Add padding to the top of the video to allow for the Navbar height..
#stockVideo {
width: 100%;
height: auto;
padding-top: 60px;
}
https://www.codeply.com/go/YWnrU7WAXM
Ideally, the body would have padding-top instead as recommended in the Bootstrap docs...
"Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements."
body {
padding-top: 60px;
}
This has been asked and answered before.
EDIT
If you want the Navbar fixed, use the Bootstrap fixed-top class. Using position:fixed alone won't work because you'd need to also set z-index. As you can see fixed-top works here: https://www.codeply.com/go/YWnrU7WAXM
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>

Related

How to animate and shrink bootstrap navbar on scroll?

<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong fixed-top" id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px);">
<a class="navbar-brand" href="#"> <img src="imgs/vmc_logo.png" height="50" /></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 active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
</ul>
</div>
</nav>
</div>
My navbar not shrinking (Sticky-top will not work good as there is logo in it)
Only found solutions on sticky-top and jqquery
.navbar {
height: 80px;
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
.navbar {
height: 60px;
}
}
The above provided CSS code sets the height to 80px, and once the user scrolls past 992px it's going to shrink to 60px. You could try that, or using JS/JQuery.
<script src="Jquery/js/jquery-3.6.0.slim.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()<=35){
$(".navscroll").removeClass('scroll_navbar')
$("nav").css("padding", "20px");
}
else{
$(".navscroll").addClass('scroll_navbar')
$("nav").css("padding", "0px");
}
})
})
</script>
used this jquery to change directly inline css. idk why asp.net web app not applying external css attribute specifically Jquery one

Increase delay in transition speed of hiding Navbar when scrolling down using Bootstrap

I am new to HTML, CSS and JS. I am making a homepage using Bootstrap-5. I have implemented navbar in my page. The problem is that navbar hides so quickly when I scroll down. I want to increase delay in hiding of nav bar. Please tell me how to set custom transition speed for navbar? I am using Bootstrap classes for navbar.
.spacer {
height: 125vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-hide-on-scroll navbar-expand-lg navbar-light bg-light ">
<div class="container-fluid">
<a class="navbar-brand ps-5 fs-4" href="#">Abdullah Asif</a>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-5 fw-bold fs-4">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">About</a></li>
</ul>
</div>
</nav>
<div class="spacer"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
You could add additional class to the nav element, for example autohide.
Then in your CSS you would need to target this class and add transition duration property like so:
.autohide {
transition-duration: 4s;
}
You could also apply this to all nav elements on your site by targeting the nav element itself:
nav {
transition-duration: 4s;
}

loading html via js, the css in the html does not work. bootstrap 5

Im using bootstrap 5.
In index.html, im inserting the nav.html via js.
The problem is, the navbar CSS doesnt work when loaded via js. But does work if i copy the nav.html code itself into index.html.
ie. the main.css colors for navbar and navbar-brand are not showing when nav.html is loaded into index, but the colors do show when the nav code is in index, and not using the js loading.
The nav.html gets copied into many pages, thats what i want, but there is no styling. why?
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<script>
$(function(){ $("#nav-placeholder").load("nav.html") });
</script>
<!--end of Navigation bar-->
</div>
</div>
</body>
</html>
nav.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">My Co.</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">
<a class="nav-link" href="legal.html">Legal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
main.css
.navbar {
background-color: #ff00ff;
}
.navbar-brand {
color: #ff0000;
}
In the Network tab of the developer console, what is the status code ? It could just be a wrong path of your html file.
Without self-invoking expression it should work:
$("#nav-placeholder").load("nav.html");
Or if you still want a self-invoking expression:
(function(){ $("#nav-placeholder").load("nav.html"); })();
stupid me. its the order of my css.
ie.
from class="navbar navbar-expand-lg navbar-light bg-light"
to class="navbar navbar-expand-lg"
the nav css displays correctly with the colors in main.css

dynamic active state of bootstrap 4 nav bar

Currently:
I have 1 file called header.php which will contain nav bar that I will add to every page inside my so-called dashboard part of the website.
The nav bar contains 3 possible selections: Tables -> tables.php; Workers -> workers.php; Admin Panel -> admin.php
Each page is a simple php page with some HTML.
My header.php code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="/src/main/home.php">CRM</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse font-weight-bold" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Tables
</li>
<li class="nav-item">
Workers
</li>
<li class="nav-item">
Admin Panel
</li>
</ul>
</div>
</nav>
<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>
</body>
</html>
As you can see, currently, my active 'Tab' is Tables. Let's say it will be loaded by default in dashboard so this makes sense.
However, how can mark Tables 'inactive' and mark Workers 'active' once Workers is selected?
I am aware of some way of achieving this using JS like in this link but unfortunately I wasn't able to figure how this works.
You need to set a click event listener on each anchor, and then toggle the active class for each element. See this fiddle:
$('#navbarMenu a').click((e) => {
e.preventDefault();
$('#navbarMenu a.active').removeClass('active');
$(e.currentTarget).addClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="/src/main/home.php">CRM</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse font-weight-bold" id="navbarMenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Tables
</li>
<li class="nav-item">
Workers
</li>
<li class="nav-item">
Admin Panel
</li>
</ul>
</div>
</nav>

Display submenu after mouse out

would you people be able to help me out with a transition delay on mouse out? :D
My navbar has a dropdown-menu, but because there is a whitespace of several pixels between the main menu item and the submenu, on a mouse out the submenu disappears again if I don't move my mouse down quickly enough. I have been playing around with transition effects based on answers on other threads, but I just can't get it to work (because I do not really understand the logic - I usually learn through trial and error).
As such, would you people be able to help me out? I prefer a solution that focusses on transitions (instead of one that decreases the white-space), as I want to learn the transition skill for other web-design aspects as well. Hopefully, with that, I also understand better how these HTML structures actually work, so I can I re-use the basic concept for ideas.
NB: the menu-items change color upon hovering. The main CSS for that purpose is listed but I omitted the specific CSS for colors.
nav {
display:flex;
align-items:center;
flex-direction:row;
float:right;
nav-right:auto;
justify-content:space-between;
}
.btn.btn-primary {
border: 0px;
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.btn.btn-primary:hover {
}
.dropdown-menu {
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.dropdown ul.dropdown-menu li a{
border-radius:0 !important;
-webkit-border-radius:0 !important;
}
.dropdown ul.dropdown-menu li a:hover{
}
.dropdown:hover .dropdown-menu {
display: block;
}
<section>
<header class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:snow;">
<h2 class="col-md">
<a class="nav" href="./index">Foundation</a>
</h2>
<nav class="navbar-right">
<!-- make it into one block, or aligned block-->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Our mission </button>
<ul class="dropdown-menu">
<li>
Natural resources
</li>
<li>
Access to food
</li>
<li>
Public health
</li>
</ul>
</div>
</nav>
</nav>
</div>
</header>
</section>
I think your issue isn't with the transition but the navbar itself. Are you using bootstrap by the way? In the following snippet I just linked BS to your code, and what I see is that the menu is clickable but it is really tricky to click on the submenus.
The btn btn-primary class more like for clickable menus or submit buttons, but you can still make it look like a button with a little bit of CSS. But for a dropdown menu I guess it's not very intuitive.
.btn.btn-primary {
border: 0px;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
.dropdown-menu {
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Foundation
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-btn">
Our mission
</p>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Natural resources
</li>
<li>
Access to food
</li>
<li>
Public health
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</body>
</html>

Categories