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;
}
Related
I'm trying to make the current page's title change colour in the navigation bar that I have at the top of my website. The navbar is built in html with:
<div class="navbar">
<a href="index.html" class="active" >Home</a>
Indian
Italian
</div>
and the CSS that attempts to style it is:
.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:active{
color:#ffe7d1;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a:hover{
color:#874404;
font-size:20px;
}
.navbar a:current{
color:#ffe7d1;
}
The .navbar a:current is left there after I read that active may not do as I hope (I changed class="active" to class="current") but this also doesn't work.
What am I missing here?
try this
a.active {color: red}
a:active is not representing a class but a selector for a pseudoclass of <a> element
https://www.w3schools.com/css/css_pseudo_classes.asp
:active is where the mistake is.
Try this
.navbar a.active{
color:#ffe7d1;
}
I'm just starting to learn HTML & CSS and have begun building a simple website to learn on the fly.
I'm trying to build a dropdown menu that opens when the user hovers over a link (dropbtn in my code). I want the background-color and text color of the button to change when the dropdown menu is open (when the user is hovering over either the button or any of the dropdown options). For reference, you could look at http://www.cibc.ca. Their navbar is maroon/red, but once the user hovers over a button, the button color switches to grey (to match the dropdown menu) and the text-color changes to maroon. The colors stay the same when the user moves down to the dropdown options, and only reverts back once the cursor moves off the dropdown menu entirely.
So far, I've managed to create the menu such that it opens and the background-color and text color of the button change when the user hovers over the button. However, when the user moves the cursor off the button and onto one of the dropdown options, the color of the text of the button reverts back to its original ghostwhite, and so it is impossible to see the text. I'm looking for ways to keep the colors changed until the dropdown menu is closed.
This is my first post on stackoverflow so forgive me for any issues with the post.
EDIT: Adding this line of code which I happened to find on another question worked. Unfortunately, I don't know why it works, so an explanation would be appreciated.
#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{color:white;}
HTML:
<div>
<ul id = "menu">
<li><a class = "active" style = "color:dodgerblue" href = "http://www.google.ca">Home</a></li>
<li>Projects</li>
<li>Community Involvement</li>
<li class = "dropdown">
<a class = "dropbtn" href = "#">Social Media</a>
<div class = "dropdown-content">
Facebook
Twitter
Instagram</div>
</li>
<li>Join Our Team</li>
<li>FAQ</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
CSS:
ul#menu li.dropdown .dropbtn{
display:inline-block;
color:ghostwhite;
text-decoration:none;
text-align:center;
padding:14px 16px;
}
ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
background-color:ghostwhite;
color:dodgerblue;
}
.active{
background-color:ivory;
}
ul#menu li.dropdown{
display:inline-block;
}
ul#menu .dropdown-content {
display: none;
position: absolute;
background-color: ghostwhite;
min-width: 160px;
}
ul#menu .dropdown-content a{
color:dodgerblue;
padding: 12px 16px;
text-decoration:none;
display:block;
text-align:left;
}
ul#menu .dropdown .dropdown-content a:hover{
background-color: skyblue;
}
ul#menu .dropdown:hover .dropdown-content {
display: block;
}
.dropdown .dropbtn {
display: inline-block;
color: ghostwhite;
text-decoration: none;
text-align: center;
padding: 14px 16px;
}
.dropdown:hover .dropbtn {
background-color: ghostwhite;
color: dodgerblue;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content a {
background-color: skyblue;
background-color: ghostwhite;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: ghostwhite;
min-width: 160px;
}
.dropdown-content a {
color: dodgerblue;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
<div>
<ul id="menu">
<li><a class="active" style="color:dodgerblue" href="http://www.google.ca">Home</a>
</li>
<li>Projects
</li>
<li>Community Involvement
</li>
<li class="dropdown">
<a class="dropbtn" href="#">Social Media</a>
<div class="dropdown-content">
Facebook
Twitter
Instagram
</div>
</li>
<li>Join Our Team
</li>
<li>FAQ
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
The key is your hover effects have to be based on the ".dropdown" because this is the container for all the children you want to have the same effect on. I changed the css around a bit and removed some of the unneeded selector specificity.
Simply adding !important to the CSS block below should resolve your issue. The !important deceleration puts more weight on that specific style when active.
ul#menu li a:hover:not(.active), .dropdown:hover .dropbtn{
background-color:ghostwhite;
color:dodgerblue!important; /* Add !important here */
}
However, this wouldn't be necessary if your styles are in the correct order and as orangeh0g stated, they should have the correct selectors as well. CSS is compiled/read descending from the top to bottom of the document, which means that if a style is added at the top of the style sheet anything can override it after, if you choose to do so.
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/
I have this menu I set up and it underlines when hovered over, but I would like it to change color, which is the default for my wordpress theme. The title, "BOLI STYLUS" changes color exactly like I want.
Here is the code for the title:
<hgroup>
<h1 id="site-title"><span><?php bloginfo( 'name' ); ?></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
Here is the menu:
Here is the style.css code for it:
.header_nav ul{
margin: 0;
padding: 0;
text-align: center;
}
.header_nav ul li{
display: inline;
}
.header_nav ul li a{
float: center;
padding: 10.5px 11px;
}
.header_nav ul li a:hover, .menu ul li .current{
color: #50a9cb;
}
Here is the header.php code:
<div class="header_nav">
<ul>
<li>BOLI</li>
<li>BOLI+</li>
<li>ABOUT US</li>
<li>FAQ</li>
<li>PRESS</li>
<li>YOUR CART (0)</li>
</ul>
</div>
You can use the following rule, and replace XXXXXX with your desired color. I assume you want to keep the styles in the same spirit, i.e. have the selected item also have the same style as when you hover it.
.header_nav ul li a:hover, .menu ul li .current
{
color: #XXXXXX; /* replace with real value */ text-decoration: none;
}
The code that you showed already does color the text when you hover it. It also, however, underlines it. To change that add text-decoration: none; like I did below.
.header_nav ul li a{
float: center;
padding: 10.5px 11px;
**text-decoration: none;**
}
For the complete code, see here:
http://jsfiddle.net/8KPcy/1/