I've tried to make a navbar which looks like this:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
CIDashboard
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
LOG OUT
</li>
<li class="nav-item">
USER
</li>
</ul>
</div>
</nav>
My problem is that I have a space in the right side of the navbar.
How can I resolve this problem?
Related
I'm trying to make a simple navbar and I want the content of the navbar like "home" and "contact" to be shifted to the right a bit so that it works for mobile users too. This is what my navbar looks like and the red line I drew represents where I want the start of "Test" to be.
I'm not sure how to move "Test Home Contact Us" to the start of that red line. I tried putting style="left:200px" inside each of the texts' <a>...</a> section, but it didn't work. I'm using a bootstrap navbar so I basically just copy and pasted a navbar from bootstrap and here's the code for it:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</nav>
You're likely looking for style="padding-left: 200px;" instead of left.
Simply adding a container div next to <nav> tag would help.
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Source: https://getbootstrap.com/docs/4.6/layout/overview/#containers
You have to give padding-left to entire navtag. For exapmle:
nav {
padding-left: 200px;
}
I have my links on the right with no navbar on the left.
When the screen gets smaller I want the hamburger to replace these links without moving to the left side.
I added as sort of a logo placeholder which pushed the hamburger menu to the right, but the menu is still opening to the left.
Here's the code:
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Home</li>
<li class="nav-item">FAQ</li>
<li class="nav-item">Contact Us</li>
</ul>
</div>
</nav>
i think this is what are you asking for
or
i'm not understanding your question
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-auto">Home</li>
<li class="nav-item ml-auto">FAQ</li>
<li class="nav-item ml-auto">Contact Us</li>
</ul>
</div>
</nav>
Is is possible to create 2 different navbar's using Bootstrap 4.3.x like the image below?
With the first navbar (with Sample Brand) fixed to top, and the second navbar scrollable?
Not sure if there is a utility from Bootstrap I can use to handle this.
Im tried adding a 'margin-top: 56px' on the second navbar which will give a space allowance, but this only works with large screens, as the first navbar's height will change when the burger menu icon shows.
My current code is:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" >
<div class="container">
<a class="navbar-brand" href="#">
Sample Brand
</a>
<button class="navbar-toggler" 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 flex-column" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark p1-primary static-top" style="margin-top: 56px">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive">
<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 font-weight-lighter">
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Developer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
This runs ok with large screens, but when I test it on small and medium screens, this happens:
Not really sure what margin-top value should I use as Bootstrap's navbar has no fixed height.
As much as possible, I do not want to do it with javascript as I think there a possible way in css (which I just dont know. Ikr haha!) and using javascript is an overkill. Hehe
You have your secondary navbar set to navbar-expand-lg so it changes to the collapsed navbar at the md breakpoint. If you want it to stay expanded, change the expand breakpoint. e.g. navbar-expand-md or navbar-expand-sm or for all viewport sizes navbar-expand
Below is an example with the secondary nav expanded in all viewports
<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">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
<div class="container">
<a class="navbar-brand" href="#">
Sample Brand
</a>
<button class="navbar-toggler" 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 flex-column" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand navbar-dark bg-primary static-top" style="margin-top: 56px">
<div class="container">
<div class="collapse navbar-collapse" id="navbarResponsive">
<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 font-weight-lighter">
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Developer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
This is very similar to Bootstrap 4 Multiple fixed-top navbars except the 2nd Navbar is static. The margin-top on the 2nd Navbar is fine.
However, "this runs ok with large screens, but when I test it on small and medium screens, this happens..."* is the problem, because the 2nd Navbar loses its height because it has no navbar-brand. The 2nd Navbar shouldn't be collapse at all and should be expanded...
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" >
<div class="container">
<a class="navbar-brand" href="#">
Sample Brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" 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 class="navbar-nav ml-auto">
...
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand bg-primary navbar-dark p1-primary static-top" style="margin-top: 56px">
<div class="container">
<ul class="navbar-nav ">
...
</ul>
</div>
</nav>
See: https://codeply.com/p/Nqhb6cszbt/option2
aight hello there, so im using bootstrap 4 and trying to create a navbar menu
here is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><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>
</div>
<ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>
So what im trying here is I want a navbar menu and some items but I want some items not be collapsed and at the same time to be in the right.
I tried moving the item I want to be in the right moved to after toggler button and it's working exactly as I want, but in small devices and in desktop device it shows back to the left.
I tried moving the item I want to be in the right after the div collapse element but it collapses in small devices.
The problem was solved by separating the navbars into two separate divs, using bootstrap4 row and col, and giving a padding of 0 to the two separate divs. I used an in-line style to position the Login item but this is just for illustration purposes. It would be better to convert the in-line style into a class.
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><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>
</div>
</nav>
</div>
<div class="col-4 p-0 ">
<nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
<ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
</ul>
</nav>
</div>
</div>
</div>
I'm using the bootstrap navigation bar, but I want to float one of the buttons to the right instead of the left as it already is. Here's the HTML:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I've tried using nav navbar-nav navbar-right, float:right, and pull-right. I really don't know what else I could do. Any help is appreciated.
JSFiddle
In bootstrap 4 use:
<ul class="nav navbar-nav ml-auto">
This will push the navbar to the right. Use mr-auto to push it to the left, this is the default behaviour.
You would need to use the following markup. If you want to float any menu items to the right, create a separate <ul class="nav navbar-nav"> with navbar-right class to it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Create a separate ul.nav for just that list item and float that ul right.
jsFiddle
Bootstrap 5 (update 2021)
In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<img src="images/logo.png" alt="" width="150"> <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 active" aria-current="page" href="#">Home</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>
<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>