I'm trying to male that when you hover a "home" it will be a different color. Could someone please help me? Thank you!
<header class = "header">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light;">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#b38b40;">Home</a>
</li>
</ul>
</div>
</div>
You need to move your inline style="" attributes to a separate stylesheet .css or <style> element because you cannot define :hover rules in inline style="" attributes and inline styles takes precedence over rules from a stylesheet.
header.header > nav ul > li > a {
color: #b38b40;
}
header.header > nav ul > li > a:hover {
color: red;
}
<header class = "header">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light;">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Away</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Life</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Is Short</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">And Love</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Is Always Over</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">In the Morning</a>
</li>
</ul>
</div>
</div>
You have 3 options,
create a new file - only for css, and put a link to the File from the HTML page.
write in the right row, style = "your style".
On the HTML page, write the label style
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 have a navbar.php include file which i would like to make dynamic depending which url i am on. I am working on a php file with the latest version of bootstrap
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="topheader">
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="/about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-work">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn't cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div2" class="navbaritems">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div3" class="navbaritems">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div4" class="navbaritems">Resume</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<img src="img/email.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
</ul>
</div>[![enter image description here][1]][1]
</nav>
You could try this:
<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">
Try adding the below style:
.navbar.scrolled .navbar-collapse{
background: #116980;
margin: -15px;
padding: 15px;
z-index: -1;
}
The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.
I have this navigation
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" href="#">Home</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 2</a>
</li>
</ul>
</nav>
How can I bring the list items ul on the right site?
I do not want to change the direction. I want to move the complete ul item on the right site
when run the html code all thing is fine but you can try different ways
for examples:
<nav class="navbar mr-auto navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" href="#">Home</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 2</a>
</li>
</ul>
or set direction for ul like this <ul class="navbar-nav" style="direction: ltr">
or set style in css for ul tag :
ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
I'm trying to display the username of the logged in user in my application in Bootstrap 4 navbar. However, it's displayed out of vertical alignment with other elements.
Here's the example:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
The resulted E-Mail address is displayed top-right, however I want it to be displayed middle-right.
Add the class .nav-link to the span and then style the color of it accordingly like so:
Here is a fiddle Fiddle Demo
.navbar-light .navbar-nav span.nav-link,
.navbar-light .navbar-nav span.nav-link:hover,
.navbar-light .navbar-nav span.nav-link:focus{
color:rgba(0,0,0,0.8);
}
It should look like the following:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span class="nav-link">email#example.com</span>
</li>
</ul>
</nav>
Or you can keep your markup and style the span youself whichever you like
.navbar-nav span {
display: block;
padding-top: .425rem;
padding-bottom: .425rem;
}
You have to remove the class pull-xs-right so :
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Should be :
<ul class="nav navbar-nav">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Or use one ul tag like :
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
Hope this helps.
Try navbar-text to li like this
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class=" nav-item navbar-text">
<span>email#example.com</span>
</li>
</ul>
</nav>
see example here