I am using bootstrap NavBar ..
When trying to move the ul block to the right it disables the toggle button responsiveness ...
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<a class="navbar-brand nav-text text-white" href="#">Rehan's Thoughts</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-white disabled">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Add w-100(width: 100%;) to your ul element and also add justify-content-end or (justify-content: right;)
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<a class="navbar-brand nav-text text-white" href="#">Rehan's Thoughts</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link text-white active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-white disabled">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Related
This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
Closed 8 months ago.
How do you align Bootstrap 5 navbar items to the right? In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="col-md-6">
<nav class="navbar navbar-expand-lg navbar-light bg-info ">
<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 ms-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">
<h5>Home</h5><span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<h5> About</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<h5>Contact me</h5>
</a>
</li>
</ul>
</div>
</nav>
</div>
<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>
Bootstrap 5 no longer use ml and mr -- instead they swapped it out for ms (margin start) and me (margin end) to account for RTL support. Obviously in RTL right and left are swapped but start and end still makes sense in this context
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm 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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
As stated in the title, due to some internal issue of data-bs-toggle in a newer version of bootstrap, it only collapses and does not hide it afterward, and after reading a similar post about this issue https://github.com/twbs/bootstrap/issues/32643 where they addressed it, they didn't include any alternative in meantime, and as I am a beginner in web development, I am unsure what would be the best approach to do the same feature?
<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>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container">
<a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-white" href="/contact">Contact</a>
</li>
I don't see any problem. Please check if you included both css and js links properly and I see you are using text-white which makes the text like invisible if you are not having a dark theme or any contrast background by default.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<div class="container">
<a class="navbar-brand logoText" href="#"
>Power<span style="color: #0ac1ce;" class="logoText">In</span>Button</a
>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="navbar-toggler-icon">menu</i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-black" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
Here your issue is with the Text-color being white There is a class in bootstrap bg-dark Giving that to nav will change the background color so you can see the text ...
And the issue u mentioned is for modal collapse, not navbar
Here is the updated code
<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>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark p-md-3">
<div class="container">
<a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-white" href="/contact">Contact</a>
</li>
I have this issue with bootstrap 5 and vue3, and made a function onclick, that looks like this:
toggleMenu() {
try {
let el = document.getElementById('navbarCollapse');
if (el) {
el.classList.toggle('show');
}
} catch (error) {
console.error(error);
}
},
which is simply called from the button click.
I removed the data-bs-... properties from the button, naturally.
<button class="navbar-toggler" #click="toggleMenu()" type="button" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
The idea is to just toggle the 'show' class on the collapsible part of the menu.
Tried to move the nav-item "Sign Up" to right by ml-auto and justify-content-end using Bootstrap 4 yet it isn't moving.
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Removing mr-auto form the Sign Up navbar seems to do it.
Just remove "mr-auto" class from ul tag, and add below css.
.navbar-nav.rightSide {
display: flex;
justify-content: flex-end;
flex-grow: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav rightSide">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
This question already has an answer here:
Center Navbar links without brand pushing it to the right in Bootstrap 4?
(1 answer)
Closed 3 years ago.
Im Trying to center my links right under the h1, but nothing works. Here's what i have right now, i would love any help or pointers!
This is my h1-tag
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
If you are trying to center the .nav-item links horizontally, then add the bootstrap class justify-content-center to the ul tag with class navbar-nav
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
This question already has answers here:
Bootstrap 4 centered navbar
(2 answers)
Center an element in Bootstrap Navbar
(10 answers)
Centering the navbar content in Bootstrap 4 (alpha 5)
(2 answers)
How to center nav-items in Bootstrap? [duplicate]
(3 answers)
Closed 4 years ago.
Using this bootstrap code and can't make it to center...
Trying: float: center, text-align: center but it doesn't work
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Add justify-content: center; to your navbarNav id.
Bootstrap has a helper class for that to add to the navbar which is
justify-content-center
Here's a link to the documenation: http://getbootstrap.com/docs/4.1/utilities/flex/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<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">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
This could do the trick. Take a look at the code below:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.navbar-brand {
margin-top: -2px; /* to set it to the same position (height) as the nav-items */
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li>
<a class="navbar-brand" href="#">Navbar</a>
</li>
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
You have to switch to the expanded view (Full page) to see the result.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
replace this line with below line
<nav class="navbar navbar-expand-lg navbar-light bg-light text-center" style="display:block;">
I hope it's working fine.