Hello I am trying to change the background image of my navigation buttons when I hover over it. When I hover over it at the moment it goes from orange to a light grey colour and the text stays white. I would like it to go to a white background colour #ffffff and text to be #F6861F
I have attached my template.css file below
I am using the protostar template. Please help me find where I need to change.
My website is,
The CSS code your looking for is on line 2843-2847
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
The new CSS you will need is as follows:
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #fff;
color: #F6861F;
}
Make those changes and you should bet all set.
Related
We have a site here: http://americanbitcoinacademy.com/
When I hover my mouse on the logo on the right side it has the red line:
It is ok to have a hover red line on text but I want to dissappear on this logo.
Basically here's what I used on my hover line and the logo:
#main-nav .navbar-nav>li>a:hover .menu-description{
color: #a6a6a6;
}
.navbar-inverse .navbar-nav>li>a:after, .navbar-inverse .navbar-nav>li>a:focus:after {
background-color: #ea1e24;
margin-top: 50px;
}
#main-nav .navbar-nav>li>a{
padding-top: 48px;
}
#nav-menu-item-3247{
margin-top: -57px;
}
I tried to put :hover on the nav-item but it did not work out. You can use your inspector tools to check.
your problem is in your pseudo element ::after,
so apply this style targeting the last li using last-of-type:
.navbar-inverse .navbar-nav > li:last-of-type > a::after, .navbar-inverse .navbar-nav > li:last-of-type > a:focus::after {
background: transparent;
}
From looking at your site it seems to be making that line when you hover over it like the other nav bar items, the simple solution will be to remove the class that makes the red line appear for the nav bar items
Could you use visibility:hidden and target it only to the logo so that the other nav bar items keep the red bar, but that one is not viewable? Should be able to do this with the nav item id number
Use .menu-item-type-post_type instead of li:
.navbar-inverse .navbar-nav >.menu-item-type-post_type> a:after,
.navbar-inverse .navbar-nav>.menu-item-type-post_type>a:focus:after {
background-color: #ea1e24;
margin-top: 50px;
}
Or:
.navbar-inverse .navbar-nav>li.menu-item-type-custom> a:after,
.navbar-inverse .navbar-nav>li.menu-item-type-custom>a:focus:after {
background-color: transparent;
margin-top: 50px;
}
I have the following HTML code
<div>
<nav>
<ul>
<li >A</li>
<li class="selected">B</li>
<li >C</li>
</ul>
</nav>
</div>
and the following CSS code
div nav ul li {
background: blue;
color: white;
}
div nav ul li.selected {
color: black;
}
running on JSFiddle.
The white foreground color for text content entries "A", "B", and "C" is only showing up on the bullets. This is because as this post illustrates, when an href attribute is present the color attribute is not inherited by the a tag.
However I don't understand how the color value for "div nav ul li a" interacts with
(the pseudoselectors)[http://www.w3schools.com/css/css_pseudo_classes.asp] "div nav ul li a:link", "div nav ul li a:visited", "div nav ul li a:hover", and "div nav ul li a:active".
Because a tags have default color set by the browser (unlike p,span,div) so you have to set the color for the a tag.
div nav ul li {
background: blue;
color: white;
}
div nav ul li a {
color: white;
text-decoration:none;
}
div nav ul li.selected {
color: black;
}
div nav ul li.selected a{
color: black;
}
The color is not inherited by the a element becasuse you stopped at the li level. div nav ul li
This will only get the li element not the a element. If you want the a element
div nav ul li a{
//CSS properties for the a element
}
2.The Psuedoselectors deal with an elements state and how it looks in that state. For instance if you wanted to change how your a element looks on hover you would do something like :
div nav ul li a:hover{
color: orange;
//CSS properties for the a element after hover
}
The reason why this div nav ul li { color: white; } doesn't work is because that's for text inside the li, you need to target the link like this div nav ul li a { color: white; }
Take a look at the updated fiddle. Here you can see the effects of the link pseudo classes.
And here's a good article about them. W3Schools isn't the best resource.
See this fiddle
Add
div nav ul li a {
color: white;
}
to your CSS
In your CSS, you gave a style only for the <li>s and not for the <a>s inside the <li>s.
Please see this fiddle to see the effects created by four of the pseudo-selectors.
a:link - to specify style for the unvisited link
a:visited - to specify style for the visited link
a:hover - to specify style on mouse over
a:active - to specify style on link selected
On this dev site, if you hover of "BRANDS" in main menu, it brings up a dropdown. Hover over any of them and the background blinks red and then goes away.
I added background CSS to the "li" and "a" elements of the main menu like this...
.mega-dropdown-inner ul.level1 li.open:hover{
background: red !important;
}
.mega-dropdown-inner ul.level1 li a:hover{
background: red;
}
NOTE: I don't think I even need the "a" styling, but just tried it in case it helps.
Any idea why the background color won't stay the whole time you are hovering?
Because of this rule
.t3-megamenu .mega-nav > li a:hover, .t3-megamenu .dropdown-menu .mega-nav > li a:hover, .t3-megamenu .mega-nav > li a:focus, .t3-megamenu .dropdown-menu .mega-nav > li a:focus {
background-color: #002d5c !important;
}
in your custom.css line 1031.
It is overriding your rule
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 have some css I am working with, some links to be exact that have some :before on them for some aditional styling, I want the before to change background color when I hover on the .
Here's my poor attempt at it:
nav > li > a:hover a:before {
background-color: #fff
}
I just want to change the background color of the a:before when i hover over the a.
Thanks!!
Try joining them together like this:
nav > li > a:hover:before {
background-color: #fff;
}
This may also work for you.
nav > li > a:hover::before { background-color: #fff; }