I have this CSS and HTML code for my navigation menu, as you can see when you hover over one of the main links it goes orange. but then when you go over a link on the sub menu, the orange disappears.
how can you keep it so it stays orange when you go on the sub menu link?
<ul id="trans-nav">
<li>
About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
position:relative;
z-index:999;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #666666;
text-decoration: none;
}
#trans-nav li a:hover {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 200px;
background: #EEEEEE;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #EEEEEE;
}
#trans-nav li ul li a:hover {
background: #666666;
color:#EEEEEE;
}
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
Try this:
http://jsfiddle.net/wjy74/
#trans-nav:hover {
background-color:#F36F25;
color: #eeeeee;
width: 89px;
}
Related
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before{
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
I have a nested <ul> within my nav ul. When the <ul> has only one element its padding is fine and the <li> fits nicely. However when I have more than one element in the nested <ul> it extends to the side of the page. I can see nothing to do with padding changes in my :first-child or anything in my css for the nested <ul>.
The nested ul with multiple elements
The nested ul with only one element
Here is the HTML:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul>
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS:
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
Any ideas on how I can keep the width of the <ul> to the max length of one of the items?
Add display block in
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
display:block;
}
here is the fiddle
Yop!
i checked Your css and the problem was here:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
Which i changed to this:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
//width: 100%;
display:table;
color: black;
font-size: 12pt;
}
So now it's getting the width of longest item :)
Hope i helped!
This is Structure HTML :
<div id="menu" class="col-md-12 menu-inner menu-nav">
<ul class="nav-effect">
//looping for HEAD-MENU => Computer
<li>
<a>COMPUTER</a>
<div class="sub-menu">
<ul>
// looping sub-menu computer => dekstop
<div class="sub-child">
<li>DEKSTOP</a></li>
//looping FOR SUB-MENU DEKSTOP
<li><a>DEKSTOP ASUS</a></li>
<li><a>DEKSTOP DELL</a></li>
//
</div>
//
</ul>
</div>
</li>
//
</ul>
</div>
CSS:
#menu {
position: relative;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
float: left;
z-index: 20;
}
#menu > ul > li:hover {}
#menu > ul > li > a {
text-decoration: none;
display: block;
z-index: 6;
}
#menu > ul > li > div {
display: none;
background: #26348b;
position: absolute;
z-index: 5;
padding: 0 10px;
margin-top: 3px;
left: 0;
border-top: 1px solid #fff;
width: 100%; //REMOVE THIS <<==
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li > div > ul > div > li a {
display: block;
white-space: nowrap;
min-width: 110px;
}
.sub-menu > ul > .sub-child {
width: 25%;
float: left;
display: block;
}
#menu > ul > li > .sub-menu > ul > .sub-child > li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
.menu-inner {
background: #26348b;
margin: 20px 0 15px;
padding: 0!important;
height: 33px;
}
.menu-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu-nav ul li {
border-right: 1px solid #fff;
padding: 7px 59px 3px;
}
.menu-nav ul li li {
padding: 5px 0 0;
border-right: none;
margin: 5px 0 2px 15px;
}
.menu-nav ul li:last-child {
border-right: none
}
.menu-nav ul li a {
color: #fff;
position:relative;
}
.menu-nav ul li a:hover {
text-decoration: none;
}
.nav-effect li a {
padding: 0 0 5px;
}
.nav-effect li > a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #f6a328;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.nav-effect li > a:hover::after,
.nav-effect li > a:focus::after {
height: 3px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
ul.nav-effect li ul li a {
font-weight: normal;
}
ul.nav-effect li div ul div li a {
font-weight: normal;
}
I already set css and everything is fine except last menu (Accessories and Peripheral)?
For more details, Please check Here
Idkw only the last menu have problem, maybe because too much content? or text to long?
Where I did mistake?
Thanks Advance
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
I'm trying to create an active/current link on my nav bar.
In the HTML, there an element with a class="current" attribute on one of the elements.
I want that element to have a background if the class is active/current
<ul id="trans-nav">
<li class="current">
About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
</ul>
What do i need in my CSS?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
position:relative;
z-index:999;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #666666;
text-decoration: none;
}
#trans-nav li a:hover {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li active {
background-color:#F36F25;
color: #eeeeee;
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 200px;
background: #EEEEEE;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #EEEEEE;
}
#trans-nav li ul li a:hover {
background: #666666;
color:#EEEEEE;
}
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
I have tried this but it didn't work:
#trans-nav li active {
background-color:#F36F25;
color: #eeeeee;
}
You were so close!
#trans-nav li .active {
background-color:#F36F25;
color: #eeeeee;
}
You just forgot the . on .active
Working Fiddle
Your css would need the . indicator for Class, and the link selector.
#trans-nav li.current a {
background-color:#F36F25;
color: #eeeeee;
}
Try this, the first one will target the li with the current class, the second will target the link for current (About Us) and won't flow down to the sub-menu due to the direct descendant selector >.
#trans-nav .current {
background-color:#F36F25;
}
#trans-nav .current > a {
color: #eeeeee;
}