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/
Related
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;
}
}
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/
Just asked a similar questions but turned out i overlooked where i placed the tag. It was fixed but created another issue.
Added a style to the hover of the links whereby a border appears upon hover:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: white;
border-bottom: #16b2d9 solid 3px;
}
All works fine however, is there a way to make the border length adjust depending on the length of the text?
You could use an underline instead of a bottom border:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: black;
text-decoration:underline;
}
http://jsfiddle.net/gratiafide/goLk6gcf/3/
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