I am trying to make a navbar with Bootstrap 4, but my code doesn't seem to work. My code practically mirrors the tutorials, with only a few changes to nav-brand. What did I do wrong? Here is what it looks like.
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="/">
<img src="/assets/logo/logo.svg" width="30" height="30" class="d-inline-block align-top"
alt="">
<b class="hojasdeplata">Fourteen Trees</b>
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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 disabled" href="#">Disabled</a>
</li>
</ul>
It turns out that I needed to move nav-brand into a div with the rest of the navigation.
Related
I've been trying to figure this out for a while now. I'm a bit of a noob when it comes to Bootstrap, so please allow me the probably simple question.
I'm trying to create a navbar with bootstrap 4, with the majority of menu items on the left, but with the login button on the right. I've figured some roundabout way of doing it (which could be wrong) but whenever I view the page in phone or tablet view, the 'login' item of the menu doesn't appear when one clicks the burger menu icon.
It appears up to a point (think it's about 760px) and then just disappears from view.
Here's the markup to this point, any help at all would be appreciated.
<a class="navbar-brand" href="#"><img src="imgs/branding/nerve logo_small.png" width="50" height="50" alt=""></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="index.php">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="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
</nav>
I think, the problem is here
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
d-none d-md-flex - this part means, that this element will be hidden (d-none) until 768px (d-md-flex), and then will be displayed as flex. Try to remove d-none
UPDATED
The best way is to remove a standalone login ul and add Login as a part of a global ul list.
<ul class="navbar-nav w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">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="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
<li class="nav-item flex-sm-grow-1 text-sm-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
Look closer to flex-sm-grow-1 text-sm-right in Login li. And don't forget to add w-100 to ul.
I'm trying to add three icons at the right corner, search, notification bell and user. I do not want to collapse since this is for an Electron desktop application and the navbar needs to be fixed.
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
</a></li>
</ul>
</nav>
In doing so, the icons appear one after another vertically which widens the navbar. How do I correct this? I am relatively new to Bootstrap.
On the ul element change the class to just nav instead of navbar-nav & add class d-flex
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav d-flex">
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
</a>
</li>
</ul>
</nav>
Here's a codesandbox where it's working https://codesandbox.io/s/weathered-wildflower-86fv8
Give display: inline-block to ul and li tag.
ul.navbar-nav, li.nav-item{
display: inline-block;
}
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
</a></li>
</ul>
</nav>
There is a Stack Overflow answer that addresses your issue.
Extracting the code from this answer you will be able to custom your navbar properly:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">Navbar</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">
<img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
</a></li>
</ul>
</nav>
The only thing that matter here will be the mr-auto in the first ul.
You'll have more explanation on this page to understand how it works.
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
When I run this code my image, which is a small picture of myself and my wife is being padded on the right and left side with a thin white line. I can't quite figure out what I'm missing.
Not sure if I'm using the navbar correctly as I'm still trying to figure this stuff out.
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark fixed-top">
<!-- Brand/logo -->
<div class="container col-sm-12">
<a class="navbar-brand" href="#">
<img src="http://dishtruck.com/joe_tn.jpg" alt="logo" <style width ="40px" height = "40px">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Media</a>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</ul>
</div>
Given the code below is the supposed behavior that the button is hidden at lg and xl; while the collapsed content is only toggeable at md or is it toggeable from md downto xs? Can someone help explain this?
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-md" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav 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" href="#">About</a>
</li>
</ul>
</div>
</nav>
It becomes toggleable at medium and is from medium down.
The navbar-toggleable-* means that *from * down it is able to be toggled*.
I have been working with this today, and that is the behavior that I have seen and is described in bootstrap docs
Used navbar-expand- This means it always in collapsed mode