I am looking in the devtools and it is revealing the following code:
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
The problem is, I change these in my css file and it won't let me get rid of the grey background color. How can I override it?
Thanks in advance.
EDIT: Ended up being a ui-router issue, not a css issue. Sorry everyone, thanks for the troubleshooting. Changed:
<li ng-class="{active: stateis('app.contact')}" ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
To this:
<li ui-sref-active="active">
<a ui-sref="app.contact"><i class="fa fa-phone"></i> Contact</a>
</li>
And is fixed
Remove ">" after nav class. Please Try this :
.nav li>a:focus, .nav li>a:hover {
text-decoration: none;
background-color: red;
}
Check out working fiddle
Related
This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 3 years ago.
I've read multiple topics with this same question and tried following all instructions but I can't seem to remove the bullets from the following <ul> <li> segment.
<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name#email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>
I've added both:
div#mobile-contact-bar-outer {
list-style-type: none!important;
}
div#mobile-contact-bar {
list-style-type: none!important;
}
Neither have any effect. What am I missing? No caching on site.
Add list-style: none to the UL tag. MDN reference
ul {
list-style: none
}
The following does it, you have to edit the ul tag directly as list-style-type isn't valid on divs
div#mobile-contact-bar-outer ul {
list-style-type: none;
}
div#mobile-contact-bar ul{
list-style-type: none;
}
<div id="mobile-contact-bar-outer">
<ul>
<li><a data-rel="external" href="tel:+18885551212"><span class="fa-stack fa-3x"><i class="fa-fw fas fa-phone"></i>
<span class="screen-reader-text">Phone Number for calling</span></span></a></li>
<li><a data-rel="external" href="mailto:name#email.com"><span class="fa-stack fa-3x"><i class="fa-fw far fa-envelope"></i><span class="screen-reader-text">Email Address</span></span></a></li>
</ul>
</div>
you can either add a class to your element like
<ul class="newclass">
and add you list-style-type: none to that element like
ul.newclass{
list-style-type: none
}
this new class will allow more control to this individual ul element
or add the class to your div
div#mobile-contact-bar-outer ul{
list-style-type: none;
}
no need for the important tag now.
I'm trying to change the text color of "Sale" item, but not a phone number with only CSS. I can't edit HTML code.
.menu.left a:first-child {
background: yellow;
color: red;
}
Results in both yellow & red
.menu.left li:nth-child(2)`
background: yellow;
color: red;
}
Results in only yellow background
Do you have an idea how to solve this?
You can target the <li> or the <a>
in this case i target the second li and then the a so the font changes to red.
If you only target the li, the font wont change to red.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
Example targeting the <a>
.menu.left li:nth-child(2) a{
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Example only targeting the <li>
.menu.left li:nth-child(2){
background-color: yellow;
color: red;
}
<ul class="menu left">
<li>
1231233123
</li>
<li>
Sale
</li>
</ul>
Comment by OP
"Thank you, Gerardo, your solution worked very well. I run into trouble though with mobile version of this link. Maybe you could take a look? codepen.io/anon/pen/xYJKRW "
On your comment you added a codepen, where you have the same mistake. You are trying to target the <li> when you have to target the <a> try this:
[data-mobile-dropdown-rel="sale"] a {
color: red;
}
.menu.left li:nth-child(2) a {
background: yellow;
color: red;
}
Add color:red; to .menu.left li:nth-child(2) and keep the background:yellow; where it is now. Your trying to change the font color of the <a> tag not the <li>.
This is supposed to work:
ul.menu li:nth-child(2) a {
background-color: yellow;
color: red;
}
For changing color of <a> you have to change color of <a> directly. Otherwise it won't work. In this case you have to change color of <a> not <li>. That is why it does not work.
I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.
So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.
Here is what I have so far:
<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>
PS: it also doesn't work when I put the class value between <li>
The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:
<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>
When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing
a.blue{
background:#0000ff;
}
Try this
.nav>li>.blue:hover, .nav>li>.red:focus {
background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus {
background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus {
background-color: red !important;
}
To change background of <a> link you just need to add :hover for class directly like this.
<style type="text/css">
.fblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.tblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.pred_background:hover, .fblue_background:focus {
background-color: red;
}
</style>
<ul>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>
jsfiddle link: https://jsfiddle.net/g9y2v91e/
So I am using bootstrap to generate a hover style when hovering over a navbar link. This works fine until you use IE9 and are too fast, the style stays "hovered", even when not hovering the item anymore.
Like this I can get multiple items in my menu in the "hovered" style which shouldn't be happening.
My code:
<ul class="nav nav-list">
<!-- ko foreach: router.activeItem().sidebar.links -->
<li data-bind="visible: visible" class="special">
<a data-bind="attr: { href: hash, title: title }"
data-toggle="tooltip"
data-placement="right">
<i class="menu-icon fa fa-5x" data-bind="css: icon"></i>
</a>
</li>
<!-- /ko -->
</ul>
The bug:
I have tried alot of things like adding another class like this:
.noHoverForThis {
color: inherit !important;
}
This does not work for some reason.
Same for overriding the whole bootstrap class didn't work for me, unless I failed hard writing this...
.navbar .nav-list > li:hover > a,
.navbar .nav-list > li > a:hover {
background-color: #e7e7e7 !important;
color: inherit !important;
}
Keep in mind the bug only occurs in IE9.
Any help would be very welcome!
EDIT: Interesting to know: I am using ACE Theme
www.wrapbootstrap.com
So I finally figured it out.
The code that should be used to fix this issue and override the hover state is:
.no-skin .nav-list > li:hover > a {
background-color: rgb(248, 248, 248) !important;
color: #585858 !important;
}
.nav-list > li::before {
width: 0;
height: 0;
display: none;
}
And then include it in the Index.cshtml of durandal
<!--[if lte IE 9]>
<link rel="stylesheet" href="../../Content/IEHacks.css" />
<![endif]-->
This will override the hover of the ace theme using bootstrap v3.2
I'm trying to change the submenu background color of a menu in its hover state. I've tried using firebug to find the relevant css classes but have only been partially successful.
If you visit the site (http://www.yogaacademy.com.au/new/) you'll see that there is both a grey and black background on hover. I want it to be completely black.
It's a wordpress site using the woothemes canvas theme with some customizations. The html (below) is pretty standard, but the I haven't been able to figure out exactly where the relevant css is coming from: styles.css and css/ and custom.css in the canvas-child theme.
Your help will be much appreciated.
Thanks.
change background color to black in layout.css line 211
#navigation ul.nav ul {
background: black; /*#e6e6e6 => black*/
left: -1px;
}
Try remove "float: left;" from #main-nav li in custom.css line 143
#main-nav li {
/* float: left; */
Change:
#navigation ul.nav ul {
background: #e6e6e6;
}
to
#navigation ul.nav ul {
background: #000000;
}
I think this CSS line is coming from: wp-content/themes/canvas/css/layout.css on line 211
Cheers
Go to that submenu class, then put this code: (Let's assume it's called child)
child:hover {
background-color:black}
**Try this code......**
Put in you style sheet.
#navigation ul.nav ul li:hover{
background: #000000;
}
HTML
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Financial</li>
<li>Real Estate</li>
</ul>
</li>
</ul>
</div>
CSS
#myNav ul.nav ul li a:hover{
background: #000000;
}