There's a background hover in the bootstrap 'More' dropdown in the left nav here which I'm trying to get rid of, I can't see where the background colour is coming from and I removed all background hovers.
Anyone know how I can locate the CSS affecting it?
EDIT: sorry, this answer is dedicated to the bug in the dropdown on the right side.
Is it this piece of code that is bugging you:
Structure.css / line 596:
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover
{
background-color: #464358 !important;
color: #fff;
}
I found that one with the Firebug extension for Firefox. Install, rightclick on the item, "analyze with Firebug".
Today browsers come with built-in element inspection tools, but Firefox has the popular Firebug plugin as well. You should have the option to artificially set :hover on an element you are inspecting.
Anyway, you don't need to know where the rule is to override it. Just set background-color: auto !important on the selector, that should do the trick.
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover {
background-color: #464358 !important;}
Remove this lines
Use firebug for it #left-nav .dropdown-menu > li > a:hover
CSS line 1353
Try this:
ul.dropdown-menu li a:hover{
background: #fff !important;
cursor: default;
}
Or this if you want to achieve the same parent background color:
ul.dropdown-menu li a:hover{
background: transparent !important;
cursor: default;
}
Related
I am attempting to get the current selected menu within a navbar to be underlined however it isn't working.
My code:
.navbar-nav .nav-item:focus .nav-link {
text-decoration: underline;
background-color: yellow;
}
It seems quite common to have the selected menu link underline or highlighted in some way but I cannot figure out how to achieve this with Bootstrap 5.
You should apply pesudo class :focus on .nav-link element
.navbar-nav .nav-item .nav-link:focus {
text-decoration: underline;
background-color: yellow;
}
The reason that your css doesn't affect is because .nav-item never get focused..
If you want it to get focused use tabindex.
Else, change it to .nav-link:focus {text-decoration: underline;} (you don't need even !important for that).
Try to override the 'active' class:
.navbar-nav .active { text-decoration: underline; background-color: yellow; }
Good morning all,
I am currently developing a site on Wordpress and would like to remove the dotted rectangle when I click on my logo.
thank you in advanceenter image description here
I think it is because of tag "<a>" outline properly.
Add this to your css.
a:hover, a:active, a:focus {
outline: none;
}
if above code didn't work then try this (change <a> color from this #1490d7 to transparent)
a:hover, a:active, a:focus {
color: transparent;
}
Add above code at the end of css/colors/default.css or edit
the below code on default.css
body a:focus, body a:hover {
color: #1490d7;
}
I'm attempting to make my anchor text white when a person hovers over a nav item or when the nav item page is active.
Currently, all is well except the text color. Sounds simple enough but I'm struggling.
I'd like the anchor text to become white when the nav item is either hovered over or is the active page. Currently the anchor text just turns grey, I suspect due to the opacity thats on there too.
Here is the code that I have been using:
.dropdown ul li.current_page_item,
.dropdown ul li:hover,
.dropdown ul li.on {
background-color: orange;
opacity:0.4;
color: white;
}
It could be that this is not the relevant sample of code but I cannot see what else could be important here. I'm working on a Wordpress site and am finding working with the CSS a little tricky. Here is the site itself if anyone thinks I've not added the relevant snippet: http://tinyurl.com/m562wgd
The anchor tag does not inherit the color from its parent, so you should set it explicitly:
.dropdown ul li:hover a{
color: white;
}
Remove color: white; from your .dropdown ul li.on rule and instead add it to this new css rule:
.dropdown ul li:hover > a {
color: white;
}
Add the css to hyperlink inside the li tag
.dropdown ul li a:hover {color: white;}
You're right that it's the opacity that's making the text appear gray. The way you have the code you are applying a 40% opacity to the white text. If you truly want white, either drop the opacity completely or make it a higher value (0.9).
Not sure why you want the opacity, but keep in mind that not all browsers recognize opacity - and show the 100% white. And I believe IE8 and lower do not support the :hover psuedo-class on anything but an tag.
.dropdown ul li.current_page_item a,
.dropdown ul li a:hover,
.dropdown ul li.on a {
background-color: orange;
opacity:0.4;
color: white;
}
Hope this helps.
my problem is rather simply explained, but I just cannot find the answer using firebug etc....
Why are my submenu items overlapping? Hover over "Aktuelles" and you can see that the transparent submenu items overlap, creating ugly white bars. The ul li elements have no minus margins assigned to them, so why are they doing it?
Thanks!
It's because you are giving .main-navigation li a fixed height. Line 946 in style.css. Remove the height. Also the box-shadow on .main-navigation li ul li a might cause some ugly design. You'd better apply the shadow on .main-navigation li ul.
The line-height of a <a> is higher than it's parent <li>.
Set the line-height in the following classes to equal values:
.main-navigation li ul li a
.main-navigation li
You have this css class:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
Change it like this:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
opacity: 0.75;
}
#Bram Vanroy answer is the way to go...
Also try this code
.sub-menu li {
margin: 0;
}
Because .main-navigation li style affects all the li in that menu, so this margin: 0 2.857142857rem 0 0 is making the .sub-menu li to have an ugly margin-right
Hi I'm trying to make a joomla site here, only one problem I can't seem to figure out. The color of my active link doesn't change, it has an image and a color, the image is in place as it should be, but the color doesn't change. Anyone an idea? here's the css:
a {
color: #ffffff;
text-decoration: none;
}
a:link, a:visited {color: #ffffff; text-decoration: none;}
a:focus, a:hover {
color: #e2231a;
text-decoration: none;
}
#links li.active {
color: #e2231a;
text-decoration: none;
background: url("../images/hover.png") bottom center no-repeat;
padding-bottom: 17px;
}
I know the active statement looks different then the rest, but this was the only way to get my image to show. Really stuck on this..
Used to this for a tag
#links li.active a {
// here style for your anchor link
}
If you want just the list elements within Links to change when active use this.
#links li:active a {color:#000;}
If you want all lists to be effected by this change use
li:active a {color:#000;}
If you want more than just the li elements to change ie ever single link on the site that is active to obey these rules then use the following
a:active {color:#000;}
Hope this helps you out.