I'd like 2 rows of Navbar to appear like this
CompanyLogo link link link
-----------------------------------------------------------------------
link(dropdown) link link link link link
company logo (centered), upper 3 links (align right).
the upper 3 links should collapse into the logo.
entire 2nd row align center and collapsible. Here is my code:
<html>
<div class="header" style="margin-bottom:0">
<a class="logo" href="#default">CompanyLogo</a>
<div class="header-right">
country
language
<a href="#signup">
<img border="0" alt="signup" src="Sign up icon png.png" width="30"
height="30">
</a>
<a href="#signin">
<img border="0" alt="signup" src="Sign in icon png.png" width="30"
height="30">
</a>
</div>
</div>
<nav class="nav navbar">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Make Your Wish</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Purchase Bid Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</nav>
</html>
Note: I don't know what you mean by "the upper 3 links should collapse into the logo" so I just put them along with the other navbar items on small screens.
HTML
The navbar HTML should be straight forward. You can take a look at the Bootstrap documentation.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Country</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up | Sign in</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Make Your Wish</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Purchase Bid Credits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
On small screens
Again, I don't know what you meant by 3 links collapsing into the logo, so I just put them before the other navbar items.
The tricky part here is to center the logo. To do that, beside setting justify-content: center; on the navbar, I also need to change the button toggler to absolute positioning so that it won't take up any space to prevent the logo from staying in the center.
CSS
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: .5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
Result
On larger screens (> 992px)
We can change navbar's flex-flow to column so that 2 rows would be displayed. Also we can change the upper 3 links (I assigned a custom css class "upper-controls" to it) to absolute positioning for the same reason we did on the button toggler above.
CSS
/* since it's expanding at lg */
#media(min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: .5rem;
font-size: 85%;
}
}
Result
fiddle: https://jsfiddle.net/aq9Laaew/257205/
Related
I am learning how to code with html and am trying to create a navbar to have some li on the right side and some on the left. Using bootstrap I can seem to find out how to move contact and only contact to the right side of my navbar. Does anyone know how to do that? I tried looking at other answers on this site and cant figure it out. Would I have to make the last one its own ul?
I have tried using float right and justify content end but it only works in the ul class and moves everything over. Same with ms-auto. If I put it down in the li class nothing changes. I have tried adding padding too but nothing moves. I just want to know how to move contact to the right side of my navbar and thats it not the About, My Account, and Login. Please ignore my html file names I know I have to update them.
Here is my code:
` <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/circle_r.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>`
You can move the "Contact" link to the right side of the navbar by adding a class to the ul element and using CSS to align the elements. Here's one way to do it:
Add a class to the ul element, for example: . The ml-auto class is from Bootstrap and will align the elements to the right.
Add a CSS rule to your stylesheet to change the justify-content property of the class you added to the ul element. For example:
.ml-auto {
justify-content: flex-end;
}
Your updated code would look like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/circle_r.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
You can apply position: absolute; to move the element to the right side of the navbar. I added a class contact to the li element so that css can be applied. Give the parent position: relative; as that will be the container the contact li is being responsive to. You can ignore the flex css as that was mainly for me to quickly align the links in a row. You can adjust the padding and spacing as needed.
.navbar-nav {
display: flex;
gap: 2rem;
background: lightgrey;
position: relative;
}
.nav-item {
list-style-type: none;
}
.contact {
position: absolute;
right: 0;
top: 0;
padding-right: 1rem;
}
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item contact">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
I'm working on my first html/css project ever, and I'm using bootstrap. I have a little html experience using Blogger in the past.
When my navbar is expanded, I want the first li item (a button) to float to the left of the page, and the rest of it to float right.
I can get all the items to float one way or the other using flex-start or flex-end but I can't seem to apply it to this single element. I tried using the margin-right property to force it as well, but the results were pretty inconsistent.
I've gone through a bunch of codeply samples as well, and the only other solution I found was treating the button like a logo, which wouldn't collapse into the navigation menu when it became a hamburger.
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Any custom CSS I wrote to override bootstrap was just for colors and fonts, so I don't think it would affect anything, but I can add it if anyone needs to double check.
Thanks in advance.
This code seems to place the 'Download Resume' button to the left on medium size screens and larger
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-navigation" style="" class="navbar-collapse justify-content-between collapse">
<div>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You can set the first li's width: 100% so that it takes all the available spaces from the left.
And use flex-end on the parent (ul) element to make the rest of the child move to the right.
.navbar-nav{
display: flex;
justify-content: flex-end;
}
.navbar-nav li:first-child{
width: 100%;
}
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
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.
I wanted to create a navbar hamburger in mobile view. But The issue is, I have two ULs, and when I created a hamburger The two UL's will split into mobile versions. Is there any way I can fix that thing?
This is my code:
<header>
<div class="container" id="home">
<div class="container">
<nav class="navbar navbar-default">
<div id="nav-toggle">
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="mr-auto">
<span class="navbar-title">PRACTICE FOR NAVBAR HAMBURGER</span>
</div>
<div class="mx-auto">
<div class="navbar justify-content-center" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
</div>
<div class="ml-auto">
<div class="navbar" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
I wanted to stay the desktop view as this
The first <ul> is in the HOME section then the second <ul> is MY ACCOUNT
You can use flex for a div that includes two ul:
*{
box-sizing: border-box;
}
.container{
display: flex;
justify-content: space-between;
}
.navbar1{
width: 60%;
}
.navbar2{
width: 30%;
}
ul{
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
}
nav1 li{
width: 20%;
}
nav2 li{
width: 25%;
}
<div class="container">
<div class="navbar1 justify-content-center" id="nav">
<ul class="nav1">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
<div class="navbar2" id="nav">
<ul class="nav2">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">1<i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">2<i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">3<i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>
I think the best solution is to wrap both of your ul into a single one in mobile screen sizes using JavaScript
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>