Good day! The problem appears with actual Chrome version I already have.
This is the actual Chrome version I have 99.0.4844.51
Suddenly discovered that menus (we uses simple downloaded several years before with some style change) on our website go now wrong, for example that there is no font highlight (change colors) on menu hover
Before it was:
nav ul li:hover {
color: white; /* color menu active font */
background: #005DAB;
}
Now it doesn't work and was implemented also additional:
nav ul li a:hover {
color: white;
}
To make it highlighted as before.
I'm attaching complete JS fiddle with code
But together with it appeared other very strange story - disappearing of menu buttons after hover. Because probably it cannot show in other browsers I made Youtube video to show completely.
I'm sorry but I don't know where is the mistake and what to do. Your assistance is kindly appreciated!
I think issue is happening in menu items which has children. You can try this css if it works:
#media (min-width:761px){
li.sub:hover a, li:hover a {
color: white !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li a{
color: grey !important;
}
}
#media (max-width:760px){
li.sub:hover ul a {
color: white !important;
}
li:hover a {
color: #005DAB !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li.sub a:hover {
color: #005DAB !important;
}
li a {
color: white !important;
}
}
Related
I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.
Here is the link to jsfiddle
li {
display: inline-block;
position:relative;
line-height: 7vmax;
vertical-align: middle;
}
ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}
a:hover { background-color: #2c3e50;
padding: 1vmax;}
Does anyone know why is this? And how can I fix this? Thanks.
The flickering and jumping are caused by the padding you're adding on hover.
Simply add the padding on your normal state like this:
ul li a {
color:rgb(23,123,177);
text-decoration: none;
margin-left:5vmax;
font-size:1.3vmax;
padding: 1vmax; // add it here
}
a:hover {
background-color: #2c3e50;
// remove it here
}
I've created a fork of your code and updated it:
https://jsfiddle.net/7jsf9o2t/1/
I am having a hard time overwriting the hover function on twitter-bootstrap for the nav-pills item. I am using Ruby on Rails
Specifically I want to remove the text-decoration: underline from the hovering
How can i go about doing this? here is the source code:
.nav-pills {
li {
float: left;
/* Links rendered as pills*/
> a {
border-radius: $nav-pills-border-radius;
}
+ li {
margin-left: 2px;
}
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: $nav-pills-active-link-hover-color;
background-color: $nav-pills-active-link-hover-bg;
}
} } }
Specifically I want to remove the text-decoration: underline from the
hovering
May be not the best thing to do (well, why not), but since I can't see your code, try this:
.nav-pills > li > a:hover {
text-decoration: none;
}
or rather:
.nav-pills {
> li > a:hover {
text-decoration: none;
}
}
If you post JSFiddle code, I'll edit my answer and give you more precise solution.
I am running into a weird issue with bootstrap 3, I am trying to make my home link in my navbar active when the page loads. Now looking at this bootstrap example:
http://getbootstrap.com/examples/starter-template
It's as simple as adding class="active on the li you need to be active..
But for some reason this isnt working for me, I have set up a fiddle to demonstrate the issue below. Does anyone have any idea why this is working for the example but not in my case?
http://jsfiddle.net/QS7f8/
Ah I have figured it out, I had some conflicting classes for the active state.
I had:
.navbar ul.nav a:active {
color: #fff !important;
background-color: #ff7454 !important;
}
.navbar .nav li.active a {
color: #bababa;
}
When only this was required:
.navbar .nav li.active a {
color: #fff;
background-color: #ff7454;
}
Here is the working fiddle: http://jsfiddle.net/QS7f8/2/
I am creating a dropdown menu for a Wordpress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don't seem to work in my case.
I think the solution must be:
parent:hover child { ... }
and it works for example here.
I tried to do the same with my code (please see last CSS selector) but it doesn't work here.
Update your CSS from:
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
To
#menu ul li:hover a {
background-color: #006699;
}
#menu ul li a:hover {
color: #FFFFFF;
}
Updated example on jsFiddle.
You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:
.menu ul li:hover > a {
background-color: #006699;
color: #fff !important;
}
I have css:
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #CCC;
}
the hover does not work when i first load the webpage however when i click on the hyperlink then go back the hover then works. What is the issue.
Maybe there is some extra CSS hanging around somewhere... You could try resetting CSS at the beginning of your file:
a:visited, a:hover, a:active { text-decoration:none; }
Test your code at the seperate page of your project, I think it works, if it works, there is something else in your project that makes it incorrect, I mean external css