So for some reason my bootstrap nav toggle that shows when the page shrinks is not toggling on click. I have made sure to import the jquery library first so i not sure why it wouldn't work.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JPV Painting Plus</title>
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css\styles.css" />
</head>
<body>
<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 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>
<img id="index-banner" src="img\index-banner.jpg"/>
<h1 class="text-center font-weight-bold"></h1>
</body>
</html>
You are importing the javascript file as a stylesheet, you should import it as a script.
Notice how when you add a stylesheet you add a link element, but for js files you need script element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<title>JPV Painting Plus</title>
<body>
<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 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>
<img id="index-banner" src="img\index-banner.jpg" />
<h1 class="text-center font-weight-bold"></h1>
</body>
</html>
You typed <link rel="stylesheet" type="text/css" href="js\bootstrap.min.js" />. It should be <script src="js/bootstrap.min.js"></script>. It is a script, not a stylesheet.
Import the jquery at the end of your html document, before the body end tag for example.
Use
<script src="PATH"></script>
instead of link tag.
Consider using the CDN version of bootstrap over modules. On CDN the toggle works but module didn’t.
Related
I currently have a very minimal navbar set up with Bootstrap 5.
With navigation bars, there is both the 'navbar-brand' and nav links.
I want my brand/logo to be all the way on the far left, while all the navbar-nav links to be all the way to the right.
This could be achieved with flexbox and justify-content-between
However I have 0 clue where the navbar flex properties come into play, so therefore I am not sure where or what to change to achieve this effect
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/brand.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
Is this what you want ? Indeed, justify-content-between is very useful for that. You have to use this style for the parent div and to put the children elements you want inside it.
<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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<nav
class="navbar d-flex justify-content-between fixed-top navbar-expand-lg navbar-light bg-light p-2"
>
<a class="navbar-brand align-self-center" href="#"><img src="images/brand.png" /></a>
<button
class="navbar-toggler align-self-center"
type="button"
data-bs-toggle="collapse"
data-bs-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 text-end pe-1">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</nav>
</body>
</html>
I am very new to all this. I have built a simple nav bar. The problem is that it shows down the page, instead of across the page. How do I get it to show across the page instead? Thank you in advance.
<!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">
<!--Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<!-- nav bar -->
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="the-larder-logo.png" width="50" height="50" alt="">
</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 show" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Food <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Drink</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact Us</a>
<a class="nav-item nav-link" href="#">Special Events</a>
</div>
</div>
</nav>
EDIT: the problem was in <div class="collapse navbar-collapse show" id="navbarNavAltMarkup"> this line...just remove the show class and you're good to go.
As you're using bootstrap you can use the below code to use as navbar...don't forget to add the scripts for bootstrap.
<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 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>
I am trying to create this website, complete noob. I copied this navbar code from Bootstrap because that's what the guy doing the tutorial told me to do, but mine doesn't look good. he was working on windows and i am on a mac so maybe that's the issue. Can someone help me out. This is the code I copied from bootstrap
<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>
You are missing the css file.
You need to include the CSS file in your html, in the head element:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<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>
</body>
</html>
Working example here.
The relevant part is the style tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
This CSS is pointing to bootstrap CDN, but maybe wanna host it yourself!
What I want to do is center the brand name/image and have navbar items in both sides.
You can find the code here: https://codepen.io/anon/pen/MdNEdL
<!DOCTYPE html>
<html>
<head>
<title>Above Peak</title>
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav d-flex justify-content-start">
<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>
</div>
</div>
<div class='d-flex justify-content-center'>
<a class="navbar-brand" href="/">
Brand
</a>
</div>
<div class='d-flex justify-content-end'>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
<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>
</nav>
I have tried every possible solution I could think of, the Brand keeps on the right.
Thank you!
CodePen : https://codepen.io/anon/pen/WBVMbp
HTML
<html>
<head>
<title>Above Peak</title>
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav d-flex justify-content-start">
<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>
</div>
</div>
<div class="navbar-header">
<a class="navbar-brand" href="/">
Brand
</a>
</div>
<div class='d-flex justify-content-end'>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
<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>
</nav>
CSS
.navbar-header {
float: left;
text-align: center;
width: 100%;
}
.navbar-brand {float:none;}
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.