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>
Related
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>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I'm pulling my hair out trying to center my nav items and have my button at the end. I managed to get the button to the end but cannot figure out how to center the items+brand. Any help would be appreciated!
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>DOC</title>
</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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">The team</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-outline-success" type="submit">Login</button>
</div>
</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>
Well you can't do such thing inside of a single flex (it might be possible using margin auto but I'm not sure about it) but using two nested flex boxes can help you
here in this code I used the div.collapse as first flexbox and ul.navbar-nav as the second one
<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 justify-content-between navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav w-100 justify-content-center mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">The team</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Contact Us</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-outline-success" type="submit">Login</button>
</div>
</div>
</div>
Here is a live demonstration of how it works, let me know if you meant something else
https://jsfiddle.net/mahdiar_mansouri/fohgr7ew/7/
1: I want to change size of logo and name in bootstrap navigation.
2: I have navigation menu, but it not appearing.
Navbar:
<nav class="navbar navbar-expand-lg py-4 fig-nav">
<div class="container">
<a href="#" class="navbar-brand">
<!-- Logo Image -->
<img src="./assets/logo.svg" width="50" height="50" alt="" class="d-inline-block
align-middle mr-3 img-responsive">
<!-- Logo Text -->
<span style="color:#ffffff" class="text-size text-decoration-none font-weight-
bold">Name</span>
</a>
<button class="navbar-toggler ml-2" 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 id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="about.vue" class="nav-link nav-link:hover ">About
</a></li>
<li class="nav-item "><a href="products.vue" class="nav-link nav-
link:hover">Products</a></li>
<li class="nav-item "><a href="information.vue" class="nav-link nav-
link:hover">Information</a></li>
<li class="nav-item ">Jobs</li>
</ul>
</div>
</div>
</nav>
You made some mistakes in your code. Please check my code.
I am assuming you are using Bootstrap-5 where negative margins are disabled by default but can be enabled in Sass by setting $enable-negative-margins: true. Read their documentation - https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin.
OR
use Bootstrap-4
OR
use your custom CSS.
Please check my code.
.navbar-nav{
margin-left: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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">
</head>
<body>
<nav class="navbar navbar-dark bg-primary navbar-expand-lg py-4 fig-nav">
<div class="container">
<!-- Logo Image -->
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="50" height="50" alt="" class="d-inline-block
align-middle mr-3 img-responsive">
<!-- Logo Text -->
Name
<button class="navbar-toggler ml-2" 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 id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">About </li>
<li class="nav-item "><a href="products.vue" class="nav-link nav-
link:hover">Products</a></li>
<li class="nav-item "><a href="information.vue" class="nav-link nav-
link:hover">Information</a></li>
<li class="nav-item ">Jobs</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
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;}
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.