I am working on a website and I want my navbar buttons to show when selected. I added a hover function that works but I want it to remain like that when the link is opened. Here is what I have right now.
HTML:
...<body>
<header>
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Title</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Store</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
CSS:
ul {
list-style-type: none;
text-align: center;
margin-top: -3.7%;
}
ul li {
display: inline-block;
margin-left: 0%;
font-size: 170%;
}
ul li a {
transition: 0.6s ease;
text-decoration: none;
color: #000000;
padding: 5px 40px;
border: 2px solid #000000;
font-weight: 700;
}
ul li a:hover {
background-color: #000000;
color: #ffffff;
}
ul li a:visited {
background-color: #000000;
color: #ffffff;
}
What can I add or improve? Thanks in advance!
Create an active class and use it in your pages accordingly
ul li a:hover,
.active {
background-color: #000000;
color: #ffffff;
}
<li>Home</li>
ul {
list-style-type: none;
text-align: center;
margin-top: -3.7%;
}
ul li {
display: inline-block;
margin-left: 0%;
font-size: 170%;
}
ul li a {
transition: 0.6s ease;
text-decoration: none;
color: #000000;
padding: 5px 40px;
border: 2px solid #000000;
font-weight: 700;
}
ul li a:hover,
.active {
background-color: #000000;
color: #ffffff;
}
ul li a:visited {
background-color: #000000;
color: #ffffff;
}
<header>
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Title</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Store</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
I would add a new class and call it something like .currentPage. Now on each of your pages, you have to give the current li item the class currentPage.
For example, on index.html the first li needs the class.
Then customize that class.
There's no selector that is able to select your current page.
Related
I have been trying to create my first html and css website, but right now I'm stuck in the navigation because I'm trying to do a hover effect in the links, what I want is when you hover a link, a box should appear over a link, this box will have a shadow, can you help me out?
Thank you!!
Here is my nav code atm:
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
css:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000; }
.main-nav li{
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
}
.main-nav li a:link
.main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
transition: background 0.3s ease-in-out;
}
Example of what I want: https://w3layouts.com/preview/?l=/boombox-a-entertainment-category-flat-bootstrap-responsive-template/
Here is a code snippet with your intended behavior:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000;
}
.main-nav li {
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
padding: 4px;
border-radius: 4px;
}
.main-nav li a:link .main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
box-shadow: 4px 4px 4px #000;
transition: background 0.3s ease-in-out;
}
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
I added padding: 4px; and border-radius: 4px; to your .main-nav li a selector and I added box-shadow: 4px 4px 4px #000; to your .main-nav li a:hover, .main-nav li a:active selector. I hope this helps.
Have you something like this?
nav ul li a:hover {
background-color: #333333;
color: #FFFFFF;
box-shadow: 2px 10px 8px #888888;
}
I am having trouble styling a basic nav.
I would like the nav menu colour to be grey and when it is hovered over turns to the green colour with a bottom border. It also jumps around on hover. I tried to add in border-bottom: transparent; but I think it is being overridden. I have played about moving the code and the a tag seems to be the culprit but I am not sure how to solve it. Hence all the styles.
HTML
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li{
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
padding: 10px;
}
a {
text-decoration: none;
}
.nav a {
color: #70B0A8;
}
Here is a fiddle to see what I'm talking about.
You have define
.nav a {
color: #70B0A8;
}
at the end of your CSS which will surely override your :hover effect and also you've defined :hover color for .nav li:hover { instead of .nav li:hover a { viz not a right way to define hover effect for a tag inside li.
Further you should first define the border-bottom and padding for your li tag initially instead of :hover to prevent the jumping issue.
You have to change your CSS like the Snippet below.
Code Snippet
a {
text-decoration: none;
}
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
background: #fff;
}
.nav li {
display: inline;
text-align: right;
color: #70B0A8;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
padding: 10px;
border-bottom: 1px solid transparent;
}
.nav li a {
color: #70B0A8;
}
.nav li:hover {
border-bottom-color: #97A6AA;
cursor: pointer;
}
.nav li:hover a {
color: #97A6AA;
}
<body>
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" />
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
The padding on your hover style was causing it to jump around.
Replace your .nav li:hover with the below.
.nav li:hover a{
color: #97A6AA;
text-decoration: underline;
cursor: pointer;
}
https://jsfiddle.net/c1egheLy/
So you remove the padding on hover and simply change the CSS around to suit what you need such as below:
.header {
padding-top: 16px;
}
.logo {
float: left;
}
.nav {
display: inline-block;
vertical-align:top;
margin: 0;
padding: 10px 0;
text-align: center;
color: #70B0A8;
}
.nav li{
display: inline;
text-align: right;
color: grey;
font-size: 20px;
font-weight: 700;
margin-right: 60px;
height: 100px;
opacity: 0.6;
border-bottom: transparent;
}
.nav li a:hover {
color: #70B0A8;
border-bottom: 1px solid #97A6AA;
cursor: pointer;
}
.nav a {
color: grey;
text-decoration: none;
}
<div class="header">
<img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/>
<div class="nav">
<ul>
<li>About</li>
<li>Technical Capabilities</li>
<li>Staff and Associates</li>
<li>Courses</li>
<li>Products and Hire</li>
<li>Contact</li>
</ul>
</div>
</div>
Im slightly baffled as to why you don't have your logo beside the menu links too but thats simply moving the <img> into <class="nav"> but then within this instance you'd need to add width:100%; to .nav {} CSS
Replace this lines in your code
.nav li:hover {
color: #97A6AA;
border-bottom: 1px solid #18961d; //Green Color
cursor: pointer;
/* padding: 10px; */ //Remove this padding line
}
I hope this helps..
I'am stuck with this one thing in navigation bar.
So I made ribbon navigation bar with hover when mouse over the element. I do have class ".active" then ribbon is little bit longer, but when i mouse over this active element ribbon decreases. I want to know how can make hover on everything except for that ".active" class, and also for drop-down content.
I think, there is a work with those Pseudo-elements like :not() but i'm not sure,i tried almost everything.
Thanks.
Here is my HtTML+CSS code so far!
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>
Since .active is applied to the parent li, you need to use :not() on that to target .active or not, and then apply the CSS that changes when you hover a link
nav[role="top"] li:not(.active) a:hover { ... }
nav[role="top"] ul {
list-style-type: none;
float: right;
margin-top:0px;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
padding:0 8px;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0px;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
}
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}
nav[role="top"] a:hover::after {
margin-top:-18px;
content: "";
display: block;
position: static;
width: 0;
height:20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
.active a {
height:12px;
text-decoration: none;
width:20px;
background-color: #aecacc;
}
.active a:first-child {
color:white;
}
.active::after {
margin-top:0px;
content: "";
display: block;
position: static;
width: 0;
height: 20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display:none;
position: fixed;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: all .4s ease-in-out;
}
.dropdown-content a:hover {
background-color: rgba(208, 208, 207, 0.2)
}
.dropdown:hover .dropdown-content {
display:block;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>
</nav>
You are correct about the :not(). Add it to line 29 of your CSS
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}
I'm triying to create a horizontal nav bar in my website. The problem is when I hover over one of the options. It gets highlighted but not as I want. This is the result:
As you can see there's some space which should be highlighted as well but it's not.
My Html and CSS:
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
<hr />
<hr />
</body>
Add line-height in li
line-height: 21px;
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
line-height: 21px;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<div class="section">
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
</div>
If you don't need to support IE8. I would look at maybe using the nav tag instead for your needs. Consider the following snippet;
nav {
text-align: center;
background-color: green;
}
nav a {
text-decoration: none;
color: #fff;
transition: .3s background-color;
}
nav a:hover {
background-color: #f0f0f0;
}
nav a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<nav>
El local
Como Llegar
<a class="active">Historia</a>
</nav>
</body>
With your current solution you'll need to float the li elements in order to get the correct behaviour with specified widths I believe. You could also consider a flexbox solution.
There are some simple guidelines to creating CSS navigation bars here.
Hope that helps you out!
I want to make it so the +Kendrick element is not underlined, but the Gmail and Images elements remain underlined when hovered over, any help would be appreciated, thanks
Relevant HTML
<body>
<div id="header">
<ul>
<li>+Kendrick</li>
<li>Gmail</li>
<li>Images</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Relevant CSS
#header {
background-color: none;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#header ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
}
#header ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#header ul li a:hover {
text-decoration: underline;
}
ul a:hover first-child {
text-decoration: none;
}
You almost had it there. You just needed to finish the last css style like this
#header ul li:first-child a:hover {
text-decoration: none;
}
Here is the JSFiddle