I have created a navbar its <li class="active"> is not showing desired result.
It is showing like this:
I have used same css for my .active and .hover. My .hover is working fine but .active is not.
This is Html code:
<div class="navbar">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Servies</li>
<li>Contact</li>
</ul>
</div>
and this is CSS:
/*navbar css*/
.navbar{
width: 920px;
height: 37px;
text-align: right;
text-shadow:3px 2px 3px #321;
background-color: #666633;
border-radius: 5px;
}
.navbar ul{
list-style-type: none;
height: auto;
padding: 8px 0px;
margin: 0px;
}
.navbar li{
display: inline;
padding: 20px;
font-family: 'Play', sans-serif;
font-size: 18px;
font-weight: bold;
}
.navbar a{
text-decoration: none;
color: #999966;
padding: 8px 8px 8px 8px;
}
/*you can see here i add css for hover and active*/
.navbar a:hover, .navbar li.active{
color: #CCCCB2;
background-color: #999966;
}
This is its fiddle
I want to ask why they have different result even there css is same?
This is because you are applying the active class to your li item, and not your link item. I think you will find that if you instead write
<li ><a class="active" href="#">Home</a></li>
and your css to
.navbar a:hover, .navbar a.active{
color: #CCCCB2;
background-color: #999966;
}
here is my fiddle
Each <li> element is larger than the <ul> container due to padding.
Try it with padding: 8px;
.navbar a:hover, .navbar li.active{
padding: 8px;
color: #CCCCB2;
background-color: #999966;
}
Js Fiddle Demo
It is because you have a padding: 20px; to .navbar li
Check out this or maybe this.
you have to change => .navbar li{padding: 8px 20px;}
or
.navbar a{padding: 8px 24px;}
.navbar li{padding: 8px 10px;}
Related
I can't seems to put it together on my brain after almost practicing for 24 hours.I need help on changing the button text color to white, while the rest stay the same color
//NAVIGATION
//========================
.nav ul
display: flex
padding-left: 0
padding-top: 15px
.nav li
list-style: none
padding: 10px
.nav ul li a
text-decoration: none
color: #000000
.nav ul li:last-child
color: #FFFFFF
.nav ul li a:hover
color: #5c6ac4
.nav li:not(:last-child)
margin-right: 20px
.nav li:nth-child(3)
margin-right: auto
//BUTTON
//==============
.btn
width: 160px
height: 20px
//border: 1px solid #5c6ac4
background: #5c6ac4
border-radius: 5px
box-shadow: 0 0 20px rgba(0,0,0,0.2)
padding: 10px 15px 10px 15px
.btn:hover
background: #212b35
transition: background-color .6s ease-out
<nav class="nav">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
I've prepared an image on my particular issue
You've already defined a color in .nav ul li a. You either need to overwrite that by adding color: white !important to .btn or change the structure of your code.
Handling a CSS file with many !important tags could become difficult in large projects, so try to avoid it.
Add color: white; to .btn {..} in css file (and comments in css are /* comment */:
.btn {
color: white;
width: 160px;
height: 20px;
/* border: 1px solid #5c6ac4; */
background: #5c6ac4;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
padding: 10px 15px 10px 15px;
}
first you can't use preprocessor just like that, you should convert it to CSS and then use that CSS, and in CSS comments are /*...*/ and rules are like .btn{ key:value; }
so after converting your sass to css we have :
/* Navigation */
.nav ul {
display: flex;
padding-left: 0;
padding-top: 15px;
}
.nav li {
list-style: none;
padding: 10px;
}
.nav ul li a {
text-decoration: none;
color: #000000;
}
.nav ul li:last-child {
color: #FFFFFF;
}
.nav ul li a:hover {
color: #5c6ac4;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-child(3) {
margin-right: auto;
}
/* Button */
.btn:hover {
background: #212b35;
transition: background-color .6s ease-out;
}
a.btn {
width: 160px;
height: 20px;
/*border: 1px solid #5c6ac4;*/
background: #5c6ac4;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
padding: 10px 15px 10px 15px;
}
<nav class="nav">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
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..
The following code snippet works fine in Chrome and Mozilla browsers, but on IE8 i see only a an underdered list with no design –ave the following HTML and CSS code, and I'm not sure why. Any ideas?
nav {
background-color: #666;
height: 50px;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
nav ul {
list-style: none;
display: inline-flex;
padding: 0;
margin: 0 auto;
}
nav ul li {
display: inline;
margin: 0 auto;
}
nav a:link, nav a:visited {
color: #FFF;
display: inline-block;
padding: 15px 25px 15px 25px;
height: 20px;
font-size: 20px;
text-decoration: none;
font-family: gothic;
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited {
background-color: #5aada0;
}
<div class="container">
<nav>
<ul>
<li>home</li>
<li>about</li>
<li class="active">contact</li>
</ul>
</nav>
</div>
HTML5 is not supported by IE8 so you can't use the <nav> tag.
Replace your nav tags with something like this:
<div class="nav"></div>
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
Here is a live example:
http://jsfiddle.net/Pzvdv/
<ul id="navigation">
<li>HOME</li>
<li>OUR APPROACH</li>
<li>MENU</li>
<li>GET IN TOUCH</li>
</ul>
#navigation {
float: left;
list-style-type: none;
}
#navigation li {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
#navigation li a:link {
color: White;
text-decoration: none;
}
Notice how I can click the link if I'm careful, but when I click the "tab pill" itself, the link isn't clicked.
Any workaround or better ways to accomplish this visual effect?
I want to follow the link href whether the user clicks the actual letters or the container pill.
The padding and other styles have to move from <li> to <a>.
On top of that, you have to add display:block or display:inline-block to the anchor.
Currently, your code does not work as expected, because the padding on the <li> adds a gap between the <li>s border and the anchor.
http://jsfiddle.net/Pzvdv/9/
#navigation li {
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
}
#navigation li a:link {
display: block; /* Or inline-block */
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
padding: 5px;
}
If you add some padding to the link element like so:
#navigation li a {
padding:5px
}
It should work.
Set a to display as a block, i.e.:
a { display:block; }
And add height/width to 100%, and move all padding to there too. That will make it fill the entire list item.
The css for the link needs to be applied to the anchor instead.
#navigation li {
float: left;
}
#navigation li a {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;=
font-size: 12px;
margin-right: 6px;
padding: 5px;
cursor: pointer;
}
Like this? http://jsfiddle.net/Pzvdv/17/
You're adding all the presentation styles to the li elements instead of the actual links, just switch them and your pill menu works fine:
#navigation li {
float:left;
}
#navigation li a {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
You should style the <a> element itself.
#navigation {
float: left;
list-style-type: none;
}
#navigation li a:link {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}