as you can see on this jsfiddle, I'd like my active menu item to have a black rounded background (by "rounded" I mean similar to how it looks like with the hover effect).
For that purpose I have this piece of code
navbar-classic li a.active,
.navbar-classic li a:hover {
color: #fff;
background: black;
}
The issue is that even when I'm on index.html, my first menu item ("Index") still has a transparent background. Seems that li a.active is not taken into consideration.
What is the issue?
Many thanks,
It's because .active class is missing.
See this fiddle
Home
Related
I've menu with some links and when i'm clicking on them on mobile mode in chrome i see a blue background over my links.
I've tried outline:none on :hover ,:active & :focus on my links but its no luck.
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
color: #e6ebf6;
outline: none;
}
It looks like you are selecting the text so that you can copy and paste it somewhere. Use:
user-select: none;
When someone is actually viewing this on a mobile, this blue styling would not show unless they held their finger down so as to select the text.
was my problem too!
you should remove the highlight from your links try this:
-webkit-tap-higlight-color: transparent;
it worked for me!
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
I have this site:
http://paul.dac-proiect.ro/index.php/about/
I want that when the user clicks on the menu item selected to have red.
I tried the code below but do not understand why do not work.
I found more information about this but I do not understand why the work is something wrong in writing code?
.navbar .nav > li > a:active{color:red;}
I am convinced that it is something very simple but fail to figure out what the problem.
You can help me solve this problem?
Thanks in advance!
Try this:
li.current_page_item > a {
color: #F00 !important;
}
:active pseudoclass is just a moment when you click and has mouse button down.
Active item in your case has class current_page_item, so:
.current_page_item > a {color: red;}
Add this in your style sheet and try.
a:hover, a:active {
outline: 0;
color: red !important;
}
Simplest (but limited since it's coloring all the visited links) is using the :visited selector, like the old days when visited links turned purple.
Other option would be to add a css class .active which applies the desired color. This could be done in plain HTML (then you have to configure this for every single page) or in PHP (by comparing current page with the URL; if it is the same, apply .active)
I suggested to add a class when navigation clicks.
For example :
Highlights
Add class to it when click
<a class="active" href="http://paul.dac-proiect.ro/">Highlights</a>
CSS
.active{
color : #f00;
}
This will work
li.current_page_item > a {
color: red !important;
}
because you used
li.current_page_item > a {
color: #000000 !important;
}
so you need to change color from #000000 to red.
First of all i would like to add that its been a while, about 3 years, since i've developed a dropdown menu in CSS. I have this drop down menu, but i have the following issue. apparently i cannot override properties of li/a elements of my submenu.
I would like to make the font color of submenu's li's a elements same as color of menu's ul's li's a elements, which is light grey ( rgb(206,206,204) )
Could somebody please take a look and point me at what i am doing wrong? Here's a link to a source code archive with html, css and background images:
http://www.filedropper.com/001_17
Your problem is in this rule:
div ul.menu li:hover a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
With that rule all <a>'s in that <li> turn white. What you need to do is have only the direct children turn white:
div ul.menu li:hover > a{
background-color: rgb(73,144,241);
background-color: rgba(73,144,241,0.05);
color: rgb(255,255,255);
}
JSFiddle Demo
I hope someone can help me. Here is a site I want to built.
I wanted the menu to stay blue, when I go to the submenu. And I succeeded with it. It stays blue thanks to this code:
nav li.active.parent > a, nav li:hover > a {
background-image: url(http://horyzon.de/images/images/navbg.png);
}
But I can't make the text to stay #FFF, as soon as the mouse goes to the submenu.
Can anyone produce the solution to this? Thousand thanks in advance.
This screenshot explains what I mean:
I could be missing something here as I haven't actually seen your markup, (no offense but I'm not visiting your site to look for it) but you could update your CSS to something like this:
nav li.active.parent > a, nav li:hover > a {
background-image: url(http://horyzon.de/images/images/navbg.png);
color: #FFF;
}
You can also try this:
nav li:hover a,
nav li:hover a span {
color: #fff;
}
I hope this helps. You want to stay away from being "too" specific such as nav.main-nav li.parent > a.active.
You want to be a little more modular like so: nav li:hover a; however, I can sometime understand that it won't work, so you need to look at how it's already behaving prior to your modifications.
Then again, it really depends on the situation.