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..
Related
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 am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
I have 2 nav bars which I want to be on top of each other without spaces, but for some reason there is an empty line as if I had used .
HTML part
<!DOCTYPE html>Logo!
<BR>
<ul class="menu">
<li>Home
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
</ul>
<ul class="submenu">
<li>subheader1
</li>
<li>subheader2
</li>
<li>subheader3
</li>
</ul>
CSS part:
.submenu {
text-align: left;
background-color: #C2F0C2;
}
.menu {
background-color: #98bf21;
}
body {
width: 900px;
margin: 2em auto;
}
.menu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}
.menu li {
display: inline;
list-style: none;
}
.menu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #FFFFFF;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #98bf21;
}
.menu a:hover, a:active {
background-color: #7A991A;
}
.submenu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: left;
font-size:0;
}
.submenu li {
display: inline;
list-style: none;
}
.submenu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #000000;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #C2F0C2;
}
.submenu a:hover, a:active {
background-color: #7A991A;
}
Fiddle
I'm not sure which part I need to change so I included all of it.
How can I remove the empty line?
E: I failed with the fiddle and forgot to press update, should have the right one now.
Apply padding:0 and margin:0 for your menu and submenu classes.
.menu, .submenu{margin:0; padding:0;}
DEMO
You just have to add this in your CSS :
.menu {margin-bottom:0px;}
.submenu {margin-top:0px;}
Have a good day.
Note: I see on firefox all together, so it give me 2 pixels on the two square join. For that i used this technique
You can use pseudo :last-child
CSS
div {
display: inline-block;
padding: 15px;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 2px solid red;
margin: 0;
white-space:0;
}
div:last-child {
border-right: 2px solid red;
}
DEMO HERE
I am having trouble removing the last border divider after 'PART C'. I would like to keep the border on the right of each element in the navigation list apart from the last one.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
You could use :last-child css selector.
a {
text-decoration: none;
color: #000000;
display: block;
width: 150px;
}
li {
list-style: none;
float: left;
padding-left: 10px;
width: 150px;
}
ul {
width: 900px;
margin: 0px auto;
}
.nav {
padding: 25px 50px 10px 0px;
z-index: 1;
font-family: "Avenir";
}
.nav a:hover {
color: #cccccc;
}
.nav a {
color: #000;
display: block;
line-height: 14px;
padding-left: 10px;
padding-right: 30px;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
width: 100px;
}
.nav li:last-child a {
border-right: none;
}
<div class="header">
<div class="container">
<div class="nav">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li>PART A
</li>
<li>PART B
</li>
<li>PART C
</li>
</ul>
</div>
</div>
</div>
Reference: MDN
Add this rule:
.nav li:last-child a{border-right:none}
Demo :http://jsfiddle.net/lotusgodkk/Lewza63r/
Another solution is add class to last li a{ which li doesn't need border} and write style to class.
'a.no_border { border-right: 0; }'
Demo link
:last-child do not work below IE9
Use this it will work on all browser
a#button2 {border-right: none;}
I am making a simple menu and I have a problem.
In my menu, there are several different options with a lightgrey top border. When you hover over the links i have there backgrounds turn lightgrey as well but there is still a small line above each link where they lightgrey background color does not cover.
See the picture below:
I do not want that line to be there. I have tried using padding but to no effect.
#wrapper {
width: 500px;
border-top: lightgrey 3px solid;
}
li a {
color: white;
font-size: 20px;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
}
li a:hover {
color: black;
background: lightgrey;
}
ul {
display: inline;
list-style: none;
}
li {
display: inline;
}
nav {
height: 40px;
width: 100%;
background-color: darkgreen;
text-align: right;
}
<div id="wrapper">
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Articles
</li>
<li>Forum
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</div>
<div id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
css
#wrapper{
width: auto;
margin-right:25%;
margin-left:25%;
}
nav{
display: table;
background-color:darkgreen;
border-top:lightgrey 3px solid;
}
ul{
padding: 0;
margin:10px 0 0 0;
}
li{
list-style: none;
float: left;
}
a{
text-decoration: none;
color: white;
font-size:20px;
background-color: darkgreen;
padding: 10px;
}
a:hover{
text-decoration: none;
color: black;
font-size:20px;
background:lightgrey;
}
I decided just to float the <li>'s, instead of using inline-block or using a table layout:
li {
float: left;
}
li a {
font-size: 20px;
text-decoration: none;
padding: 0 10px;
height: 40px;
line-height: 40px;
display: block;
color: white;
}
Updated JSfiddle