I am using bootstrap 4. The navbar looks like this on a large screen:
However, after it collapses on a small screen, it doesn't show the menu option when I click the menu button:
On a small screen, it should list the menu options once the button is clicked. How can I fix this issue? Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
height: 54px;
background-color: #484848;
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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 style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You have some flaws...
1 - Need to add plugin jQuery before bootstrap plugin:
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
...
2 - You have specified closing tags for metatags. Metatags have no end tags.
It is not right:
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
It is right. Without </meta>:
<meta name="viewport" content="width=device-width, initial-scale=1">
3 - Remove the height rule height: 54px.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
background-color: #484848;
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" 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 style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">LOREM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">LOREM</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Related
the navbar toggler doesn't expand, I'm not sure what's the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrap Installation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href=""> Coolboy </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<h1> Hello! <br> Welcome to my webpade running on Bootstrap!</h1>
<h1>hey</h1>
</body>
</html>
when I resize my screen size the toggler shows up but it doesn't react.
I'm not sure if the problem is in my browser or with my code.
when I run the code in a couple implementing bootstrap 5 the button works (although the navbar covers the text for some reason?).
I just want to write a simple code in order to have the navbar toggler icon appeared on a html page. The toggler icon doesn't appear on the page, the three links are displayed which should be contained by the toggler icon instead. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.js"></script>
</head>
<body>
<nav class="navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#idCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="idCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Thanks for your help in advance: Bazsa
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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-xxl bg-dark navbar-dark py-3 justify-content-between justify-content-xxl-start">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#idCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="idCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
</html>
You are missing the navbar class in your <nav>.
Change
<nav class="navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
to
<nav class="navbar navbar-expand-sm bg-dark navbar-dark py-3 justify-content-between justify-content-sm-start">
and your navbar should give a hamburger at small screens.
EDIT: There was an issue regarding your CDN link as well. The above snippet should work for you. :)
when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5
You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler
I am trying to do the basic bootstrap navbar hamburger button on a collapsed screen. I am first just trying to get the button to be displayed but currently it won't display to the screen.
<nav class="navbar bg-light navbar-expand-sm">
<h1 class="narbar-brand">User</h1>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
</ul>
</div>
</nav>
There is nothing wrong with your html.
However, did you add js file (from bootstrap) to your html?
check this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">User</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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Bootstrap change navbar color
(8 answers)
Closed 4 years ago.
I want to change the background color of the bootstrap navigation bar.
This is how it looks at the moment.
The html code that i used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></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">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
Remove the bg-light class and set any color you want to your navbar class. Note that the bg-light has !important in the value which means it will override properties that are not important. you can use inline style with ~important, it can do the trick as well but not a good practice.
.navbar{
background-color: #bada55 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></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">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
you change the bg-light bg-light2 and write you want color.
.bg-light2{background-color:red }a.bg-light2:focus,a.bg-light2:hover,button.bg-light2:focus,button.bg-light2:hover{background-color:#dae0e5}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete Bootstrap 4 Website Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light2">
<a class="navbar-brand" href="index.html"><img src="img/logo.png"></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">
<!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link disabled" href="#">Team</a>
<a class="nav-item nav-link disabled" href="#">Connect</a>
</div>
</div>
</nav>
Your navbar background color is under !important rule:
.bg-light {
background-color: #f8f9fa!important;
}
You can try overwriting that value with another !important css rule, but with longer css path. This way your !important rule will have priority over first !important rule.
Something like:
.navbar.bg-light {
background-color: {your-desired-color} !important;
}
P.S. I wouldn't say it's a bad practice, but using !important rule should be avoided if you are not sure why you are using it. So, if you can edit your HTML, just remove bg-light class from <nav> element, and you will be able to change color for it without !important.