I am working on a navigation bar Active color on my navigation bar is not working.Hover is working fine but not the active.In when from browser i select toogle element state and click on active browser change the color on clicking active state but in normal condition its not working.i am stucked and very confused , can someone help me please ? Thanks in advance.
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #0098aa;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:05:35</span> hours</li>
</ul>
</nav>
your code working fine on fiddle there is might be some other css overwriting your code
try this
body .main-nav ul li a:active{
background-color:#0098aa;
}
if its not works try adding important // not recommended
body .main-nav ul li a:active{
background-color:#0098aa!important;
}
I recommend you to inspect element on that link and check active state, there might be some other css overwriting ur code
In your code, the background-color for :active is same as hover, so it's working but you can't see it. Change it to some other color and it would work.
In case of your website, I don't see any CSS selector as :active. Are you sure you've written it there?
In your site marketinthepocket.com you have mentioned background color as white. changing for color will work out.
body .main-nav ul li a:active {
background-color: red;
}
In my navigation I want to be able to and click on a navigation link and have the li item change color when you go the page. Eg. I click on the about us tab in the navigation, it goes to the about us page and the about us page tab in the navigation bar has changed color. I tried nav ul li:active but it is not working.
Here is the css:
#nav {
display: block;
position:relative;
border: 1px solid #002799;
background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
padding: 0px 0px 0px 0px;
border-radius: 15px;
height: 40px;
width: 470px;
margin: 0px auto;
font: Bold 16px Verdana;
}
#nav ul {
margin: 0px;
padding: 0px;
min-width:250%;
}
#nav li {
list-style: none;
float: left;
position: relative;
display:inline;
width:auto;
}
#nav ul li {
list-style: none;
float: left;
position: relative;
}
#nav ul li:last-child a {
border:none;
}
#nav ul li:hover {
background: #060652;
}
#nav ul li:active {
background: #060652;
}
#nav ul li:hover ul {
display:block;
width:100%;
}
#nav ul ul {
display: none;
position:absolute;
left:0px;
min-width:250%;
z-index: 999;
background-color: #4970E3;
}
#nav ul ul li {
border: 1px solid #FFFFFF;
display:block;
float: none;
z-index: 999;
width: auto;
}
#nav ul ul li a {
border-right: none;
font: Bold 16px Verdana;
width: auto;
}
#nav ul li a {
text-decoration: none;
display: block;
border-right: 1px solid #121B3E;
padding: 10px 15px;
color: #fbfbfb !important;
}
Here is the html:
<div id="nav">
<ul>
<li>Home
</li>
<li>About Us
<ul>
<li>Why OSTech</li>
<li>Testimonials</li>
<li>Case Study 1</li>
<li>Case Study 2</li>
<li>Green IT</li>
<li>OSdesk Intel vPro</li>
<li>Workstation Innovation</li>
<li>Consolidation and Centralisation</li>
<li>The Green Grid</li>
<li>Clean Technologies</li>
<li>OSdesk Remote Management</li>
</ul>
</li>
<li><a>What We Do</a>
<ul>
<li>OSdesk</li>
<li>OSguard</li>
<li>OSmon</li>
<li>OSvault & OSclass</li>
<li>OSmail & OShost & OSshare</li>
<li>OStrack & OSdms</li>
<li>OSarchive & OSgroup</li>
<li>OSfaq & OShelp</li>
<li>OSbill & OScal</li>
</ul>
</li>
<li>Contact Us<ul>
</li>
</ul>
</div>
You've misunderstood what :active means.
Your web browser has no concept of which li on the page represent the current page, unless you tell it somehow.
The active selector selects the active link. That is, a link you've selected using keyboard navigation (but haven't followed yet) or a link you've just clicked on (before the new page loads). Once the new page loads, none of the links are active again.
So, you can only use :active on a elements, and not for what you're trying to do here.
Instead, you want to add a class to the li for whichever tab represent the current page, and use CSS to style that li appropriately:
<li>Why OSTech</li>
<li class="current">Testimonials</li>
<li>Case Study 1</li>
with:
li.current {
background: #060652;
}
:active is only the action when the link is actively pressed, so you can see it clearly if you click on the link and hold down on it, instead of letting go.
In order to do this you will need to assign a class to the a for the page that is open. There are ways to accomplish this with a server-side language so you don't have to do it manually, but if you are making a static .html page, you will need to manually add a class (like class="active") to the a for each page that is "active".
So for example:
menu.html will have Menu and About
Whereas about.html will have Menu and About
Just as everyone said, you'll need to use a separate class for the a, :active won't work like what you want.
However, if you use the $_GET['page_id'] value you can set the class automatically. Like this:
<li><a <?php if ($_GET['page_id'] == 56) { echo 'class="active" '; } ?>href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
You can even go an extra mile, and have the page_id stored in an array at the top of the php file. And do a foreach loop and echo out the links as well as class.
<li><a>What We Do</a>
<ul><?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
echo "<li><a ";
if ($_GET['page_id'] == $menu_item) { echo 'class="active" '; }
echo 'href="http://osweb01.ostech.com.au/?page_id='.$menu_item.'">OSbill & OScal</a></li>';
} ?>
</ul>
</li>
If the above doesn't work (which it didn't for me) just apply a different colour to your navigation bar depending on which page you are on.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li b {
background-color: green;
}
li a:hover {
background-color: red;
color: white;
}
Use code as above? Simple navigation bar with 'active' faked out.
<ul>
<li><b href = "homepage.html">Homepage</a></li>
</ul>
To extend on what #Aister posted I would not use echo on the html but
<li>
<a>What We Do</a>
<ul>
<?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
?>
<li>
<a <?= ($_GET['page_id'] == $menu_item)? 'class="active" ' : '';?> href="http://osweb01.ostech.com.au/?page_id=<?=$menu_item?>">OSbill & OScal</a>
</li>
<?php
}
?>
</ul>
</li>
The main advantage in this approach is that your templates will be a lot easier to read in your editor because the html syntax highlighting will recognize the HTML and not just see a string.
One caveat to my approach is that you need to have the php ini configured to allow short tags or it will break. If it doesn't work and you can't change it replace
<?=
with
<?php echo
I have already set the text color of anchor tag in a list as BLACK in the CSS file. Now I want to declare a list item as active and change its text color, but it doesn't work. Help please!
Here's the preset color:
#already-set li a
{
font: normal 14px Arial;
border-top: 1px solid #ccc;
display: block;
color: black;
text-decoration: none;
line-height:26px;
padding-left:5px;
}
And here's the code to change active list item color:
a#active
{
background-color: #d11250;
color: white;
font-weight:bold;
}
And here's my HTML:
<ul id="already-set">
<li> List Item </li>
</ul>
You are getting confused with the a:active.
Please check this EXAMPLE which will make it a bit more clear. I have added jQuery to change the active element on the fly when clicked.
$(function() {
$("a").click(function() {
// remove classes from all
$("a").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
#already-set li a {
font: normal 14px Arial;
border-top: 1px solid #ccc;
display: block;
color: black;
text-decoration: none;
line-height: 26px;
padding-left: 5px;
}
a.active {
background-color: #d11250;
color: white;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="already-set">
<li> List Item 1
</li>
<li> List Item 2
</li>
<li> List Item 3
</li>
</ul>
The text color remains black because of the css in the list. If you want to change the text color to white in the selected element please make the following change as the EXAMPLE 2
Change a.active to #already-set li a.active.
Change a#active to a:active this will solve your problem.
I have created a navbar using an unordered list. Here is my problem:
I cannot change the color of the text of the list items and for some reason I cannot click my links anymore (I was able to click them a while ago in development, no idea when they stopped working).
Here is what the items look like now:
http://gyazo.com/c089ed3f21368d4d2a1d91a52e129222.png
HTML:
<div class="grid_16 alpha" id="header">
<ul id="nav" class="grid_4 prefix_1">
<li id="nav_home">Home</li>
<li id="nav_home">News</li>
</ul>
</div>
CSS:
#nav {
color:white;
margin-top: 54px;
}
#nav li {
color: white;
display: inline;
}
#nav a:link {
font-family: ColaborateThinRegular;
font-size: 18px;
text-decoration: none;
background-color: #353535;
padding: 5px 20px;
margin-right: 15px;
color: white;
box-shadow: 1px 1px 3px #000;
}
Found it:
look at this jsFiddle. the problem with the coloring occured because you didn't specify a:visited as well as a:link so the color was purple.
The non-clickable problem.. has something to do with href="#" or some other code on your site that prevents it.. I've linked one of the buttons in jsFiddle to google and it keeps working after first click. Try it out
After visiting the link your style stops working. Try implementing this:
#nav a:visited {color: white;}
Always remember ids are Unique.
How can I change the menu color when the page is selected?
Example:
home faq contact_us
I want to show which page is selected in the menu bar. I'm using CSS but not sure how to go about this.
My CSS code:
.menu {
float: left;
margin: 0px 0 0 0;
width: 1000px;
}
.menu li {
border-left: 1px solid #fff;
float: left;
line-height: 1em;
text-align: center;} .menu li a { color: #fff;
display: block;
font: 17px Arial, Helvetica, sans-serif;
padding: 0px 31px;
line-height:47px;
text-decoration: none;
}
.menu li a span {display:block; padding:0px 15px;}
.menu li a:hover, .menu .active a{color:#fff;
background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
width:auto;
}
.menu li a:hover span, .menu .active a span
{background: url(images/menuright.jpg) right top no-repeat;
padding:0px 14px;
border:1px solid #b3c302;
}
Well, if you're writing the menu to each page (as seems to be the case from your comments) there's nothing stopping you from changing the background colour for the specific <li> related to that page.
Example below showing white background for current page (Home) or default colour for non-active pages.
<li style="background-color:rgb(255,255,255);">Home</li>
<li>FAQ</li>
<li>Contact Us</li>
Alternatively you could use some script and create tabs like I have done in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/
I would only recommend the tabs if you don't have too much content on each page as you don't want to make 1 very large page which takes forever to load on slower connections.
NOTE: If using the tabs option the example provided uses a JQuery plugin, make sure you add the same tools if you are not going to re-code.