I'm trying to align the navbar components to the right. The code is given below. I tried with
ml-auto but it's not giving the desired result. The result that I'm getting is attached below.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 col-9 p-3 pl-5">
<h2>Header</h2>
</div>
<div class="col-md-6 col-3 my-auto ml-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ml-auto" 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">
<!-- me-auto mb-2 mb-lg-0 -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#">Home</a
>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Know More</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Actions</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
Result
I want the home, know more, etc.. content to be right-aligned. I have divided it initially into two columns. Then gave the second one the ml-auto class. What's the issue here?
I checked safari, chrome, firefox and the snippet checker in StackOverflow.
All are showing the correct styling and not what you screenshot-ed. Maybe you have an extension that is injecting some sort of custom CSS? Or you don't have the bootstrap file loaded properly?
Your font also seems a bit off in the screenshot.
What my Chrome looks like :
Could be very easy. Remove all ml-auto's then use d-flex to justify-content-end (right). justify-content-start would be the left. But.... As somebody else pointed out. When I try your code - Your menu is on the right hand side and Header on the left as required.
<nav class="navbar navbar-expand-lg navbar-light d-flex justify-content-end">
Related
The bootstrap nav items in code are not aligning properly in Blazor client side project. I am using the techniques described in Blazor template with menu across the top but am still having this problem. Here is NavMenu.razor:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark
border-bottom box-shadow mb-3 fixed-top">
<div class="container">
<a class="navbar-brand text-light" asp-area="" asp-page="/Index">Top Menu</a>
<button class="navbar-toggler" #onclick="ToggleNavMenu" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="#NavMenuCssClass navbar-collapse d-sm-inline-flex flex-sm-row-reverse" #onclick="CollapseNavMenu">
<ul class="navbar-nav flex-grow-0">
<li class="nav-item">
<a class="nav-link text-light" href="" Match="NavLinkMatch.All">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="counter">Counter</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="fetchdata">Fetch data</a>
</li>
</ul>
</div>
</div>
</nav>
MainLayout.razor:
#inherits LayoutComponentBase
<header>
<NavMenu />
</header>
<body>
<div class="container">
#Body
</div>
</body>
I have tried to modify the site.css file for nav-item, and have tried deleting all definitions for them as well but still getting this behavior:
After much research, I was able to fix this problem by commenting out the .css link tag found in _Host.cshtml. The .css file to comment out is <link href="[Nameofproject].styles.css" rel="stylesheet" />
How do you solve this issue where the navbar menu doesn't reveal downwards on medium sizes? It works fine on other screen sizes. I attached an Image here. I don't know what causes this, please help.
[ FIXED ]
The md in col-md apparently corresponded to its column on that particular breaking point. I thought it simply indicated what breaking point would cause it to collapse into seperate rows!
Removing the col-md-4 and making it col-lg-4 fixed the issue. Thank you, Overthane!
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="brand-column col-md-4">
<div class="navbar-brand">
<span>Plug</span>
</div>
</div>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-md-4" id="navbarContent">
<ul class="navbar-nav mx-auto d-flex align-items-center text-nowrap text-center">
<li class="nav-item active mx-1">
<a class="nav-link text-header">Home</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">Solutions</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">About Us</a>
</li>
<li class="nav-item mx-1">
<a class="btn btn-success btn-sm px-3 rounded-pill"> Login </a>
</li>
</ul>
</div>
</nav>
That's happening because the class .col-md-4 makes the .navbar-collapse element into a column with a size of 4 on medium screens (md). You should be able to achieve the desired effect by changing that element's classes to the following:
<div class="collapse navbar-collapse col-md-12 col-lg-4" id="navbarContent">
I have this code and cant figure out how to keep the navbar-brand together with the links.
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse"
id="navbarSupportedContent-5" style="">
<ul class="navbar-nav m-auto">
<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>
</div>
</nav>
The class nav-bar brand will not respond to "m-auto" or "text-align: center"
When I try to wrap them all in a div to center the whole group, it doesnt work and breaks the collapse button.
I can only find info on how to center the navbrand with links on either side but nothing about keeping the navbrand grouped with the links when centered.
I'd ideally like to create a fixed top navbar that has col-7 on left and col-5 on right, where each side is centered within its own column which is easy to do with divs, but this navbar css is not responding in the way I am used to.
I'm not entirely sure what you're trying to achieve with the col-5 and col-7, but to group the navbar brand and nav items, wrap both in a single div and use the flexbox util classes to center...
https://www.codeply.com/go/un2DWN8OTR
keep navbar-brand grouped with links
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
<ul class="navbar-nav align-items-center">
<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>
</div>
</div>
</nav>
Note: There is no m-auto class. Use mx-auto for horizontal (x-axis) auto margins to center.
Related:
Center an element in Bootstrap 4 Navbar
In order to have all the nav items together one the left side, remove the m-auto class from navbar-nav list.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent-5" style="">
<ul class="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>
</div>
</nav>
Check this pen on codepen
To align all the items at the center of the page, follow these three steps.
Override the flex-grow property of navbar-collapse. At the moment, it is flex-grow: 1.
.flex-grow-zero {
flex-grow: 0 !important;
}
Use the justify-content-center class to override justify-content:space-between property of navbar. As you may know, it aligns the content of a flex element at its center.
Remove the m-auto class from navbar-nav list.
.flex-grow-zero {
flex-grow: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top justify-content-center">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-grow-zero" id="navbarSupportedContent-5" style="">
<ul class="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>
</div>
</nav>
Check this pen on Codepen
Remember to use the latest version of Bootstrap.
I have a button (class="navbar-toggler"), which collapses and that works fine, but when I click on it, it displays all the menu items (links) on the left hand side, and it looks terrible!!!
I need to move the menu item links to the right...I've tried everything I could find here...but nothing makes the menu items (links) move to the right...
Can anyone help me solve this?
This is the code:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello All</a>
<button class="navbar-toggler" data-toggle="collapse" datatarget="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
Many thanks for your help!!!
You can use the "text-right" class on the "navbar-nav":
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello All</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto text-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
try adding the class "navbar-right" to your nav code
or you can also try
margin-left: auto;
Have you thought about using a menu like pushy? You can have the menu on either the left or right & it's easily changed if needed :)
https://chrisyee.ca/pushy/
i'm using bootstrap 4 on my new project and my laptop Touch + Mouse enabled windows when i tried to use bootstrap its automatically showing mobile format in desktop. how to solve this? below i attached screenshot
Note : Bootstrap 3 is working fine. this problem only on bootstrap4
My Code:
<header>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="images/logo.png" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" 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="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success" type="button">Main button</button>
</form>
</div>
</nav>
</header>
You need to use the correct HTML as stated in the documentation of bootstrap
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing
You neglected this class, so it is always collapsed.
It is not enough to just change the CSS from bootstrap 3 to 4 you also have to change the markup quite a bit.