My nav items stay to the left, even with ml-auto. I looked at some questions on here but I haven't found something that fixes my issue. I even followed a video and I can't see anything conflicting.
<nav class="navbar navbar-expand-lg navbar-light" id="navbar">
<span class="navbar-brand mb-0 h1" id="navbar-logo">Development</span>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
About
</li>
<li class="nav-item">
Portfolio
</li>
<li class="nav-item">
Contact
</li>
</ul>
Assuming you're using Bootstrap 5, ml & mr are replaced with ms & me respectively.
Everything left & right has been changed to start & end
Forgive me if this is of no help. I am a noob at this, but just encountered and resolved the same issue, myself.
Replace ml-auto with ms-auto. In Bootstrap 5, ml is replaced with ms which means margin start.
Related
I am trying to create a responsive navbar that works in a fashion such that I have two sets of right-aligned links. The first set should collapse, but the second set should remain visible at all times, with the toggler to the left of the latter set of links. That means, in the snippet below, that "Link One", "Link Two", and "Link Three" should collapse, but "Link Four" and "Link Five" should remain visible. This is a very simplified version of what Facebook does with their navbar.
Unfortunately, this is the closest that I have been able to get, though. Before the toggler is shown, everything is where it should be. When I expand, however, "Link Four" and "Link Five" drop to the bottom of the navbar, instead of staying at the top. I have tried manipulating the second set of links directly, via CSS, and could also not seem to accomplish what I was looking for.
Any feedback would be greatly appreciated, as front-end development is definitely not my strong suit.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
</nav>
Looks like you just need to use the ordering classes to get what you want. In this case order-md-last on the 2nd set of links, and then they will be natural order (2) on less than md breakpoints (xs,sm):
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto flex-row order-md-last">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
</nav>
responsive demo
Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp\
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
What You'll Learn
</li>
<li class="nav-item">
Questions
</li>
<li class="nav-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
</html>
if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)
if your collapse is not working it's probably because you did not link bootstrap.js in your project
https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/
this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine
1. The Problem
I'm trying to mimic Bootstrap's Webpage's Navbar but I'm having no success, despite having the same classes all around. I'm also using Angular and that got me wondering if that was related to something in the TypeScript framework and not with Bootstrap itself — that is the case for the dropdown button for example.
The main issue is that the uls with the menu items and social icons are not forming different rows when the screen width is reduced.
For example, this is what I expected with my website:
And this is what I got instead:
2. The Code
I'm not using anything fancy in Angular at this point, just plain objects' properties (I've tried it with a header instead of a nav also):
<nav class="navbar navbar-expand navbar-light bg-light">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
Logo
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
</ul>
</nav>
Boy, do I feel stupid for this...
After a lot of time tinkering with the subelements, the mistake was at the top all along. I had accidentally copy-pasted the <nav> element at the top from another page, and, thus, it lacked the flex-column and flex-md-row classes:
<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">
Anyway, thank you very much for those who tried to help.
[scrollspy samp[scrollspy][1]le]
now having removed the padding in the about us section, the scrollspy is not aligning to the about us, i need help on how to fix the scollspy while maintaining the picture aligned to the paragraph.
</style>
</head>
<body id="#navbar" data-spy="scroll" data-target="navbar" data-offset="10">
<nav id="#navbar" class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<a href="#" class="navbar-brand">
<img src="logo.png" alt="Logo" style="width:80px;">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="navbar-nav">
<a class="nav-link" href="#About Us">About Us</a>
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Porfolio
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
Remove the padding-top:85px style attribute from the "About Us" div - that creates a 85px high white space which apparently you don't want.
Also, the h2 in there will have a relatively high default top-margin which also creates white space above the text, so you might want to add margin-top: 0 to that h2.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 2 years ago.
I am working with bootstrap 4.
I didn't get navbar right to the page I don't know what the problem is going on.
Is Somebody else can help to fix this issue.
I have tried to add class pull-right to navbar-collapse div but its don't work. So I have also tried to add float right property and set to !important but its also not get helpful.
<div class="collapse navbar-collapse pull-right" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQS & HELPS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOGIN</a>
</li>
</ul>
</div>
I want div content(nav links) to the right of the page.
Can you please try ml-auto instead of mr-auto?
So the ul tag will be like this
<ul class="navbar-nav ml-auto">
Please check the following Stack Overflow post
What happened to the .pull-left and .pull-right classes in Bootstrap 4?
Hope this helps you out.