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!
Related
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: block;
position: absolute;
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul>
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
The "spotify" and "apple music" block elements display in one line next to each other as opposed to below each other.
I also use bootstrap on the page. Not sure if it's got anything to do with the issue because when I remove the script it still works the same.
Sorry if my code is hard to see through.
It's the inline-block on ul li in your CSS. inline-block won't break the line. See MDN Inline Elements.
in css I marked my edits.
was it necessary?
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
flex-direction: column; /*add this it*/
position: absolute; /*add this it*/
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: flex; /*add this it*/
position: absolute; /*add this it*/
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul class="sub_main">
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
I'm trying to do a nav bar with a contact button stuck to the right of the page. I want contact to be aligned with the rest of the elements of the nav bar, however when I add float: right; it just disaligns my nav bar and it doesn't move contact to the right.
Here you can see my code: http://jsfiddle.net/LG2vR/19/
Can someone please tell me the proper way to accomplish this please?
Thanks!
Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
}
<div class="wrapper">
<nav>
<ul>
<li>LOGO</li>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Just add:
nav ul li a {
float: left;
}
right before:
nav ul li a.contact {
float: right;
}
or use flexbox!
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
<div class="wrapper">
<a class="active logo" href="#">Logo</a>
Home
Page 1
Page 2
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>
I am creating a basic webpage, where I want a header logo made of text to be linked. Under this, I would like to have a slogan that stays as regular, non linked text. This doesn't seem to be working as when I put a link on just the header (even inside of a span), as the slogan text just disappears. I tried making them different blocks of text, but doing so puts them on different lines, ruining the aesthetic I would like (Header text with slogan underneath)
:-moz-selection {
color: #ffffff;
background: #00ffaa;
}
::selection {
color: #ffffff;
background: #00ffaa;
}
a:link {
text-decoration: none;
color: #00ffaa;
}
a:visited {
text-decoration: none;
color: #00D486;
}
a:hover {
text-decoration: none;
color: #ADFFE2;
}
a:active {
text-decoration: none;
color: #00ffaa
}
.thing {
background: #141414;
position: fixed;
z-index: 100;
width: 100%;
}
a.Header {
color: #aaaaaa;
float:left;
display: inline-block;
vertical-align: middle;
font-size: 30px;
margin-right: 15px;
}
.Header:hover {
color: #dbdbdb;
transition: all 0.3s ease-in;
}
#bodycontainer {
position: relative;
background-color: #191919;
height: 200%;
width: 65%;
}
.navigation {
float: right;
display: inline-block;
vertical-align: middle;
}
.navigation li {
display: inline-block;
padding: 15px;
}
ul {
margin-bottom: 0;
}
.navigation li a {
color: #00ffaa;
}
.navigation li a:hover {
color: #adffe2;
transition: all 0.3s ease-in;
}
<body background="http://i.imgur.com/6PQ1Mtl.png">
<center>
<div id="bodycontainer">
</div>
</center>
<div class="thing"><font face="hamster">
<span><a class="Header" href="">Header</a></span><br><span class="slogan">tagline</span>
</font><font face="fenice">
<ul class="navigation">
<li>News</li>
<li>Art</li>
<li>Comics</li>
<li>About</li>
<li>Contact</li>
</ul>
</font>
</div>
</body>
Any help would be great, thanks!
I've got a nav here:
http://tumolo.co.uk/navbar/
I've tried all sorts - but I cant get this nav to fill up the browser 100% width. It has white space on both Left and Right side of the navbar.
I put each nav li to 16% as it's 100% / 6 menu elements, 16% is the closest to get each element equal size.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
#media screen and (min-width: 600px) {
.nav li {
width: 16%;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
border-right: 1px solid #ebe3e3;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
.nav li:last-child {
border-right: 0;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
Flexbox will get you there!
.nav ul {
width: 100%;
display: flex;
justify-content: space-around;
}
If you're wanting the ends to be flush against the edge, it may be better to use:
justify-content: space-between;
Looking at the existing styles on the element, you can remove the padding-left and padding-right, as mentioned in the comments. Also, with flex, you may want to check out vendor prefixes.
Note: Support for old IE can be shaky.
The above does leave gaps in the header, as also mentioned in the comments. An alternative, suggested by Joe, is:
#navList {
display:flex;
}
#navList li {
flex:1 auto;
}
If it's not absolutely necessary, I'd ditch display: inline-block; on the .nav li - it messes with width calculations, as you know since you've adjusted for it with the -4px on each, which is only an approximation.
If you float the .nav li left, add box-sizing: border-box; and increase the width to 16.6667%, you'll get total coverage. You'll have to adjust .nav ul to contain it properly, but I've updated the snippet below to show.
body {
background: #ccc none repeat scroll 0 0;
margin: 0;
padding: 0;
}
.nav ul {
background-color: #fff;
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
float: left;
width: 100%;
}
.nav li {
border-bottom: 1px solid #888;
font-size: 1em;
height: 40px;
line-height: 40px;
}
.nav a {
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
text-decoration: none;
transition: background-color 0.3s ease 0s;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
background-color: #5e7ea4;
color: #ffffff;
}
.nav ul li#mvl a:hover {
background-color: #5b3e52;
color: #ffffff;
}
.nav ul li#admin a:hover {
background-color: #7c6e61;
color: #ffffff;
}
.nav ul li#liquid a:hover {
background-color: #7c4c4c;
color: #ffffff;
}
#media screen and (min-width: 600px) {
.nav li {
border-bottom: medium none;
border-right: 1px solid #ebe3e3;
font-size: 1em;
height: 50px;
line-height: 50px;
width: 16.6667%;
box-sizing: border-box;
float: left;
}
.nav li:last-child {
border-right: 0 none;
}
}
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition</li>
<li id="hmrc">Cant pay HMRC?</li>
<li id="cvl">CVA</li> <li id="mvl">MVL</li>
<li id="admin">Administration</li>
<li id="liquid">Liquidation</li>
</ul>
</div>
What I understand from your explanation, you are trying to make a header navigation that has 100% width and the nodes of the menu will have the same width;
You should use calc() let me give you an example and you can apply that to your code;
<div class="nav">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
Also in your CSS;
.nav { height:30px; width:100%;
border-bottom:1px solid #000;}
.nav li {
width:calc(100% / 4);
list-style: none;
text-align:center;
float:left;
}
We divided %100 to 4 because we have 4 li elements in our navigation.
Check on jsfiddle: https://jsfiddle.net/d9b1re2p/1/
Hoping that would help, please post your code as it is simplified in your question with a better explanation next time.
Use CSS table. It behaves much like the flex box but with better support.
It will space out each li equally up and down without the need for the 16% media query.
You will just need to tweak the styling of the links a little to add in your border.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
display:table;
width:100%;
table-layout:fixed;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display:table-cell;
vertical-align:top;
position:relative;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
Hello I am terribly sorry for the 'easy' question, it's just that I did this verbatim from the website and so I must be missing something painfully obvious. Ok so I have an li list and I want the first one to be yellow and the other elements to be white. I have for one of my rules in the real project li a { color: white but I am pretty sure that this specific class should override that rule, no? Any help would be appreciated, thanks.
.active{
color: yellow;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a class="active" href="#overview">Overview </a></li>
</ul>
</div>
Add a more specific css selector to override the white color coming from #subnav li a like below:
#subnav li a.active {
color: yellow;
}
and you will have the first li yellow if you have put active class to it.
.active {
color: yellow;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a.active {
color: yellow;
}
#subnav li a:hover {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a class="active" href="#overview">Overview </a>
</li>
<li> Test
</li>
</ul>
</div>
Try this, it should work. Thanks
#subnav li a:hover,
#subnav li a.active {
color: yellow;
}