I have a problem with Bootstrap 4 navbar collapse feature.
I set it so that the navbar collapse in mobile viewport but instead of collapsing, it shows the items as a vertical list.
This is the code:
<html>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" aria-label="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
<a class="nav-link" href="#"><i class="far fa-dot-circle fa-lg pt-1"></i></a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
</div>
</div>
</nav>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm using a customized version of Bootstrap 4 (compiled from scss). I tried to use the standard version and it does show the button instead of the vertical list, but it doesn't work too. When I click on the list, nothing happens.
I checked the browser console but it doesn't show any error.
If it helps this is the compiled CSS: https://pastebin.com/jKYGC5A7
And this is the SCSS: https://pastebin.com/bbQNCAvh
The navbar work with ul li item, here is a working example
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="#">MENU <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is a link in Codepen https://codepen.io/anon/pen/LdZYbP
and here is a screenshot when you're on a mobile view
If you are using scss, make sure to import _transitions.scss.
Related
The menu in the mobile version opens and works, but after clicking on the menu item the navbar does not collapse... I got the css, js and navbar from the bootstrap site:
Where is the problem?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
Add this inside your tags. What it'll do is, trigger a click event on the hamburger button, which will cause the menu to collapse.
<script>
jQuery(document).ready(function($) {
$('.navbar-nav li a').on("click", function() {
console.log("menu clicked");
$('button.navbar-toggler').click();
});
});
</script>
I have a bootstrap navigation menu when I resize the page to mobile size the burger menu does not work and I get an error in my console how can I fix it
<nav class="navbar navbar-expand-lg navbar-light">
<a href="home.html" class="navbar-brand ml-3 title-text">
<img src="img/Owi_Arts Logo2.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Me
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="social-text">
<a href="https://www.instagram.com/#owi_photography" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
</nav>
Setting up Bootstrap like this works with your code. However, your <div class="social-text"> makes the improper spacing of the whole .navbar, so you'll have to change that around if you want to achieve the spacing and sizing directly from Bootstrap
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a href="home.html" class="navbar-brand ml-3 title-text">
<img src="img/Owi_Arts Logo2.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"
aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav text-uppercase">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Me
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="social-text">
<a href="https://www.instagram.com/#owi_photography" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
I am quite desperate, I checked every similar questions on stackoverflow and tried many solutions found on google but in vain... I'm really unable to find a working solution to my problem.
I am developping a site with Bootstrap 4 and I have a navbar. When I click on one of the nav-link I want it to have the "active" class, while others stay normal.
I might not select the right elements or use wrong jquery/javascript code.
The navbar html code (1) is in a separate header.html file that I load with JS at the beginning of the html page (2):
(1)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></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 dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="members.html#">Members</a>
<a class="dropdown-item" href="publications.html#">Publications</a>
<a class="dropdown-item" href="teaching.html#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="web_tools.html#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="research.html#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="infrastructures.html#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
(2)
<script>
$(function() {
$("#header").load("./header.html");
});
</script>
Here is the JS I put at the end of the html page just before the </body> tag:
<script>
$('.navbar .nav-item .navlink').click(function() {
$('.navbar .nav-item').removeClass('active');
$(this).addClass('active');
})
</script>
And here the active css class I want to set to the active nav-link:
.navbar .nav-item > .nav-link.active {
color:white;
font-weight: 700;
}
Please tell me what I am doing wrong...
UPDATE
I put here the solution I found thanks to a simple snippet (that I adapted to my code) taken from this site which #NmiDev kindly pointed to me.
I add my custom active class to the link in the navbar targeted thanks to href / location parsing:
$("#header").load("./header.html", function(){
$('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});
Here a snippet.
Hope it's help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.active {
color: red !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></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 dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Members</a>
<a class="dropdown-item" href="#">Publications</a>
<a class="dropdown-item" href="#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</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>
<script>
$('.nav-link').click(function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
It's seems that you don't need to override the css active class. White is the default behavior.
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>
In bootstrap 4 when the header becomes responsive the breadcrumb button not working as it is.
I have included the Bootstrap 4 CSS and bootstrap 4 js
please help me fix the issue
Code:
.navbar {
height:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
Image:
Check you error in console Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
add jquery library before the bootstrap js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<div class="container nopadding">
<a class="navbar-brand" href="#">
logo
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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>SERVICES</a>
</li>
<li class="nav-item">
<a>SUPPORT</a>
</li>
<li class="nav-item">
<a>TECHNOLOGY</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>