I'm using the following navbar. I need to be able to center the menu li items when the navbar is collapsed.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</ul>
</div>
</nav>
The solution I came up with was doing the following:
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<div class="d-flex flex-row justify-content-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
</div>
<div class="d-flex flex-row justify-content-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</div>
</ul>
But as mentioned in the comments this is not a valid HTML - to have a div as a child of list element
It does work. But not valid - how can I properly center them then?
It's probably just a matter of applying text alignment selectively for the smaller breakpoint(s).
Note: d-block added to the collapse element for demonstration here only. View the full page demo for the alternative layout.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
<div class="collapse navbar-collapse d-block">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center">
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
<li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
</ul>
</div>
</nav>
Related
This question already has answers here:
Disable responsive (mobile) navbar in Bootstrap
(2 answers)
Closed 1 year ago.
I tried to make a responsive bootstrap navbar but not to collapse it. I want the item in navbar still stay in line even on small screen.
Here is my current navbar:
<nav id="topbar" class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active d-flex align-items-center">
<a class="nav-link" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link" href="#"><span class="tobar-text">Brand</span></a>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 2</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
About Us
</li>
</ul>
</nav>
I have tried to set margin, padding, and whatever, but still it did not help. The items in navbar still fall into new line, I don't know why. Please kindly help. Thanks
The items in navbar goes to new line is because of flex-direction: column. You can use the flex utility as below.
<ul class="navbar-nav d-flex flex-row">
I am trying to create a navbar in Bootstrap where the Brand is on the left and the links are on the left, center and right. However, none of the examples from the answered Bootstrap navbar alignment question appear to do what I am trying to accomplish.
Here is an example of the navbar I am trying to create:
I have tried applying mx-auto to the center links but that does not center the links to the viewport correctly. Using position: absolute and transform: translateX(-50%) on the center links seem like a hacky solution and shouldn't be used if there is a flexbox solution available (especially if you are using an older version of Chrome where transforming text can make it blury).
This is my code currently (it is copied directly from example 3 of the previously linked examples). I want to add links to the left side after the brand while still being able to collapse everything in the navbar.
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
Navbar 3
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</nav>
How can I add links to the left side after the brand while keeping the other links in the example in the correct positions on the center and right?
Try this code , It'll work.
<!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 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>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
Navbar 3
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-left">
Navbar 3
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
</ul>
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
I am trying to create a layout with top navbar and a left menu that collapses.
Additionally, the left menu will be hidden on medium size or smaller screen. However, the left menu will need to take the full height of the page all the time regardless of the actual size of the menu.
Here is my code
<div class="container-fluid h-100 mh-100 no-gutters pl-0">
<div class="d-flex h-100">
<div class="bg-dark h-100 mh-100 d-none d-md-block" style="min-width: 18rem; max-width: 22rem;">
<ul class="list-group p-2">
<li class="list-group-item">
Parent - Test
<ul class="list-group collapse" id="multiCollapseExample2">
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
</ul>
</li>
</ul>
</div>
<main role="main" class="flex-grow-1 pl-3 h-100 mh-100">
Here is main content....
</main>
</div>
</div>
Here is a fiddler of my code https://jsfiddle.net/7fcahme8/
as you can see, the left menu is 100% height when the page is rendered. But when you click on "Parent - Test" on the left, the menu goes over the menu div which is something I want to fix. I am expecting that the left divider will expand as its content expand.
How can I make the left menu expand 100% all the time regardless of its content?
I am trying to extend the left menu divider to expand. As you can see in the screenshot below, the list-group grows more than the menu.
To achieve this you need to remove the h-100 classes. That will fix the containers to 100% of the view height. Overflow will wrap below causing the behavior you are seeing.
If you set a min height, it will fill the are and expand as needed. Below is an example
html, body {
height: 100%;
min-height: 100%;
}
.side-panel{
min-height: calc(100vh - 56px); /* 100% view height - 56px (navbar height) */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>
<div class="container-fluid no-gutters pl-0">
<div class="d-flex">
<div class="bg-dark d-none d-md-block side-panel" style="min-width: 18rem; max-width: 22rem;">
<ul class="list-group p-2">
<li class="list-group-item">
Parent - Test
<ul class="list-group collapse" id="multiCollapseExample2">
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
</ul>
</li>
</ul>
</div>
<main role="main" class="flex-grow-1 pl-3 h-100">
Here is main content....
</main>
</div>
</div>
I need a simple schema like this in picture:
This is a try: http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview without success.
How to accomplish this?
I need what is in picture. Exactly.
In xs mode I disable many things. My problem is in desktop mode.
<div class="container-fluid" style="background:red">
<div class="row">
<div class="d-inline-block" style="background-color:blue">
<div class="container">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="d-inline-block" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
There's no much sense develop in bootstrap without grid/colmuns orientantion. You can set a fixed width for you inner element "user box".
Try this code
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background:red">
<div class="row">
<div class="container">
<div class="col-md-9 col-lg-9">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" 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>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 col-lg-3" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
</body>
</html>