Here's my code
.link {
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
.navigation .active {
font-weight: bold;
text-decoration: underline;
text-underline-offset: 5px;
}
<nav class="navigation container">
<div class="nav-brand">iAmADeveloper</div>
<ul class="list-non-bullet nav-pills">
<li class="list-inline-item active"><a class="link" href="/">Home</a></li>
<li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
<li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
</ul>
</nav>
Whenever I am setting the .link to display: inline-block, the text-underline-offset: 5px; style is not working and is shown in white color in VS Code. But, when I remove the display: inline-block, it works fine.
I need my links to be underlined when hovered. How to fix this?
PS: I am not implementing JS in my code.
You need to target the a
.link {
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
.navigation .active a{
font-weight: bold;
text-decoration: underline;
text-underline-offset: 5px;
}
<nav class="navigation container">
<div class="nav-brand">iAmADeveloper</div>
<ul class="list-non-bullet nav-pills">
<li class="list-inline-item active"><a class="link" href="/">Home</a></li>
<li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
<li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
</ul>
</nav>
Related
I can't for the life of me get the background colors or text colors to change on my navbar elements when using navbar-pills via bootstrap.
If I remove the pills element, the colors work correctly. I am getting the default blue pill with white text -- though the bold element is working on hover.
a:hover {
font-weight: 900;
}
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
<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="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>
Try this.
a:hover {
font-weight: 900;
}
a:link {
color: blue !important;
text-decoration: underline;
}
a:visited {
color: green;
}
a.active {
color: #df4759 !important;
background-color: #323232 !important;
text-decoration: none;
}
You do not have to use !important. While it does get the job done in this case, its use is arguable (read more here). All you really need to do is match the specificity of the bootstrap style declaration. If you simply inspect the element in your browser you will see the selector used is .nav-pills .nav-link.active. So you just need to use that same selector to override and be sure your styles are loaded after bootstrap. If the above set of style rules is just for this nav consider updating all your selectors as 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">
<style>
nav-pills .nav-link:hover {
font-weight: 900;
}
.nav-pills .nav-link:link {
color: blue;
text-decoration: underline;
}
.nav-pills .nav-link:visited {
color: green;
}
.nav-pills .nav-link.active {
color: #df4759;
background-color: #323232;
text-decoration: none;
}
</style>
<nav class="nav-pills navbar navbar-expand-sm">
<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="menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="">Contact Us</a>
</li>
</ul>
</nav>
I've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!
You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>
Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
I'm trying to make the links appear in the center and when I resize the page to show on mobile I want them to be placed next to each other.
Now there's 3 big blocks on top of each other on mobile. These have to be next to each other and smaller.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.container {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 32px 32px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<div class="navbar">
<div class="row">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</div>
</div>
In the code I provided you can see the code of the html page and de CSS. The images contain the view of the mobile version and how it looks on a normal browser on my laptop.
<div class="navbar">
<ul class="row">
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
</u>
</div>
First of all, your code is incorrect.
There is no nav and ul tag, and your class navbar is in the wrong place.
Your list should be:
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</ul>
</nav>
Next, you need to change styles in your responsive CSS.
.navbar-nav{
text-align: center;
}
.nav-link{
display: inline-block;
}
Here is the reference:
https://getbootstrap.com/docs/4.3/components/navbar/
Cheers.
For some reason the active class doesn't have any effect on my page. Would be very grateful for someone to take a peek and explain why it doesn't.
.nav-item {
display: inline;
list-style: none;
margin-left: 40px;
}
.nav-item a {
font-size: 30px;
text-decoration: none;
color: white;
}
.nav-item a:hover,
.active {
color: #f3ef36;
}
<header id="header">
<nav>
<ul class="nav">
<li class="nav-item"><a class="active" href="#">Hem</a></li>
<li class="nav-item">Meny</li>
<li class="nav-item">Kontakt</li>
</ul>
</nav>
</header>
From the examples I've checked on w3schools and others it should work fine, but for some reason the active class doesn't seem to bite in this context. The hover pseudoclass works but not the active class I've manually typed in the different list elements.
Please read on CSS specificity.
Rules on selector .nav-item a will always have precedence on .active.
You need to increase the specificity e.g. like this a.active
See the snippet below:
header {background:#000}
.nav-item {
display: inline;
list-style: none;
margin-left: 40px;
}
.nav-item a {
font-size: 30px;
text-decoration: none;
color: white;
}
.nav-item a:hover,
a.active {
color: #f3ef36;
}
<header id="header">
<nav>
<ul class="nav">
<li class="nav-item"><a class="active" href="#">Hem</a></li>
<li class="nav-item">Meny</li>
<li class="nav-item">Kontakt</li>
</ul>
</nav>
</header>
.nav-item {
display: inline;
list-style: none;
margin-left: 40px;
}
.nav-item a {
font-size: 30px;
text-decoration: none;
color: white;
}
.nav-item a:hover,
.active {
color: #f3ef36;
}
<header id="header">
<nav>
<ul class="nav">
<li class="nav-item"><a class="active" href="#">Hem</a></li>
<li class="nav-item">Meny</li>
<li class="nav-item">Kontakt</li>
</ul>
</nav>
</header>
Whenever i hover my mouse not on the text but on the other side of the text it shows my hover.. i want it so it hover only on the text itself not when my mouse is outside the text.
here is my code
<div class="MiniListAll">
<ul>
<li class="MiniListLI"> Christmas trees </li>
<li class="MiniListLI"> Christmas lights </li>
<li class="MiniListLI"> Ornaments </li>
<li class="MiniListLI"> Tree toppers </li>
<li class="MiniListLI"> Candle holders </li>
</ul>
</div>
CSS
.MiniListLI{
list-style-type: none;
color: #737373;
}
.MiniListLI:hover{
text-decoration: underline;
color: black;
}
i tried googling the answer but nothing came up.
You have to use inline elements inside <li> tags:
HTML
<div class="MiniListAll">
<ul>
<li class="MiniListLI">Christmass trees</li>
<li class="MiniListLI">Christmass lights</li>
<li class="MiniListLI">Ornaments</li>
<li class="MiniListLI">Tree toppers</li>
<li class="MiniListLI">Candle holders</li>
</ul>
</div>
CSS
.MiniListLI {
list-style-type: none;
}
.MiniListLI a {
text-decoration: none;
color: #737373;
}
.MiniListLI a:hover {
text-decoration: underline;
color: black;
}
jsfiddle-link
Here is one way:
CSS:
.MiniListLI{
list-style-type: none;
}
.MiniListLI a {
text-decoration: none;
color: #737373;
}
.MiniListLI a:hover{
text-decoration: underline;
color: black;
}
HTML:
<div class="MiniListAll">
<ul>
<li class="MiniListLI">Christmass trees</li>
<li class="MiniListLI">Christmass lights</li>
<li class="MiniListLI">Ornaments </li>
<li class="MiniListLI">Tree toppers </li>
<li class="MiniListLI">Candle holders </li>
</ul>
</div>