This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
can you please tell me how to align dropdown right in bootstrap + angular ?
here is my code
https://stackblitz.com/edit/angular-4risp3?file=src%2Fapp%2Fapp.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Recipe Book</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 " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto header_nav">
<li class="nav-item ">
<a class="nav-link" href="#">Recipes </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shopping List</a>
</li>
<li class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Save Data
Fetch Data
</div>
</li>
</ul>
</div>
</nav>
Try this
.float-right {
padding: 0;
float: right;
position: relative;
}
Remove the dropdown li from this current ul and after the ul add another ul as follow:
<ul class="navbar-nav mr-right header_nav">
<li class="nav-item dropdown my-2 my-lg-0">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button"> Dropdown </a>
<div aria-labelledby="navbarDropdown" class="dropdown-menu">Save DataFetch Data</div>
</li>
</ul>
I made the changes in chrome developers tools, so please remove the extra items that came while copying... Or you can just take the dropdown li and after the ul wrap the dropdown li with another ul like this:
<ul class="navbar-nav mr-right header_nav">
Related
I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>
This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Closed 1 year ago.
I am trying out Bootstrap for the first time, and it dose not seems like it is working as it should. I am trying out an a example. I will make the navbar links go to the right, and when the screen gose smaller it will be an hamburger menu (also on the right side). When i am trying this, the links gose not to the right (i tryd mr-auto and ml-auto for the ul), but when the screen go smaller, it dose form as a hamburger, but it dos not go to the right and it dose not open when i click it. So that is a big issue. Nothinh happens when i click the hamburger menu.
Am i doing something wrong with my links or code? I did download the bootstrap map's js and css and added to the project and linkin to it.
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
</head>
<section class="containerOne">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
Maybe this is the solution to your problem.
See the output here - https://demo.thelovekesh.repl.co/navba.html
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://www.pngjoy.com/tpl/img/logo.png" alt="">
</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 ms-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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
On a large screen, it looks like this.
You can also change the container and expand classes according to your needs.
it is my first question in stackoverflow and my first code in HTML/JS. I'm using NodeJS, bootstrap, express and ejs.
I'm trying to shutdown a Raspberry PI from the navigation bar. The code is:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Foot.io</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" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Rules">Rules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/System">System</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="Reboot" href="#">Reboot</a>
<a class="dropdown-item" id="Shutdown" href="#">Shutdown</a>
</div>
</li>
</ul>
</div>
</div>
And the script tag is:
<script>
document.getElementById("Reboot").addEventListener("click", function(){console.log("rebooting...");});
document.getElementById("Shutdown").addEventListener("click", function(){console.log("shuting down...");});</script>
All of this code is included in a partial called "navigation.ejs"
I also try making a blank HTML with a simple button and it doesn't works.
Currently I am building a navigation bar using Bootstrap v4 and I found out that the animation during collapsing in responsive view is not right.
Hence, I inspect the specific navigation bar and I found out that the classes (.in and .show) are in the same elements when I toggle the collapsible content.
Is there any solution on it through JavaScript or by overriding CSS?
For your information, here are the inspection of my navigation bar.
https://i.imgur.com/f4R48gv.jpg
TQ.
EDIT :
<nav class="navbar navbar-expand-sm navbar-dark bg-dark top-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 1</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 2</a></li>
<li class="nav-item px-3"><a class="nav-link" href="#">ITEM 3</a></li>
</ul>
<div class="navbar-nav">
<a class="nav-item nav-link px-3" href="#">SIGN IN</a>
<div class="divider"></div>
<a class="nav-item nav-link px-3" href="#">SIGN UP</a>
</div>
</div>
</nav>
Here are the jsfiddle link to the file.
https://jsfiddle.net/Jeffrey_Teoh/4y6n6xt4/11/
you are including bootstrap version 3 on top of your file and bootstrap version 4 at the end of your file... same with jQuery. Scripts should be added only once.
I am trying to float only select nav-items to the right with .justify-content-end
This works fine if I add it to the top level div class but if I create a special div with isolating one nav-items and use that class it does not work:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<div class="justify-content-end">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</div>
</ul>
</div>
</nav>
While .justify-content-end works this way, it moves all the items which I do not want, hence me trying to Isolate the specific nav-item:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</ul>
</div>
</nav>
Here is a codepen to test on
.justify-content-end pushes the .navbar-nav to the end since it's the only child.
Instead, you can try forcing the .navbar-nav to grow to full-width by applying flex-grow: 1 to it. Then, apply margin-left: auto; to the item you want to push to the right. Luckily, bootstrap has a utility class for the latter – .ml-auto.
Updated Codepen