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>
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>
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/
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 float a logo to the left side of a nav bar, and have the text float to the right of the nav bar. I am trying to accomplish this through bootstrap. I have tried adding float and text align classes to outer divs and specific elements. I have shown my code below, keep in mind it is not meant to be run.
//not meant to be run
//bootstrap is not hooked up
<div class = "row col-12">
<div class = "float-left col-3">
<img>
</div>
<div class = "float-right col-9">
<nav class = "nav text-right">
<a class = "homen" href="home.html">Home</a>
<a class = "aboutn" href="about.html">About</a>
<a class = "teamn" href="team.html">Team</a>
<a class = "contactn" href="contact.html">Contact Us</a>
</nav>
</div>
</div>
You can use Flexbox utilitys. For example use justify-content-end on the collapse menu:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" 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="#">Team</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
Also note, as of Bootstrap 5 ml-auto has been replaced with ms-auto
This is from official Bootstrap documentation. It uses display: flex design and if you want to align menu to left again, you can change mr-auto with me-auto. This is also responsive code with hidden button which can only come with mobile screens.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo.svg" alt="logo" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarText">
<ul class="navbar-nav mr-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
I can't seem to figure out how to set position of my navbar to certain places. I want the brand name, which is "Athletics", to stay on the left and the other options to stay on the left. I tried "navbar-left", "navbar-right", the grid system, and some CSS but nothing seemed to work. Here is a link to my code: https://jsfiddle.net/mcoulibaly23/9sn2kx58/
I will also post it below:
<htnl>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Navbar | Athletics </title>
</head>
<body>
<nav class= "navbar navbar-expand-lg fixed-top navbar-dark" style="background-color:darkmagenta; font-family:Roboto;">
<a class="navbar navbar-brand" href="#"> Athletics </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">
<ul class="navbar-nav">
<li class="active"><a class="nav-item nav-link" href="#"> Shop </a></li>
<li><a class="nav-item nav-link" href="#"> About Us </a></li>
<li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
<li><form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" height="10">
<button class="btn bth-outline-success" type="Submit"> Search </button>
</form></li>
</ul>
</div>
</nav>
</body>
If i got you right, you want to have Brand name on left and nav items to the right on navbar?
If yes, then this class should do the trick "justify-content-end"
I've modified your code slightly with comments on where i did the corrections:
<!-- appropriate for html5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<title>Navbar | Athletics </title>
</head>
<body>
<nav class= "navbar navbar-expand-lg fixed-top navbar-dark" style="background-color:darkmagenta; font-family:Roboto;">
<a class="navbar navbar-brand" href="#"> Athletics </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>
<!-- add class justify-content-end to the div below to have nav-items positioned on right -->
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="active"><a class="nav-item nav-link" href="#"> Shop </a></li>
<li><a class="nav-item nav-link" href="#"> About Us </a></li>
<li><a class="nav-item nav-link" href="#"> Lookbook </a></li>
<li><form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" height="10">
<button class="btn bth-outline-success" type="Submit"> Search </button>
</form></li>
</ul>
</div>
</nav>
</body>