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;
}
Related
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/
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.
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; }
Here is my Codepen demo which I want to show like image snap below the link:
Codepen Demo
Snap:
I used this css:
.menu > ul > li:first-child {
color: red !important;
}
To make left most link Red but still it shows Grey line.
Actually it should look like this:
Problem 2:
The length of the line above alert box should span to entire width of the page. How to do this?
I tried with chaging:
.menu > ul {
display: block;
list-style: none;
border-bottom: 0.1em solid #9e9e9e;
width: 152%; // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
margin-left: -2%;
}
Try this
.menu > ul > li:first-child a {
color: red !important;
}
DEMO
Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as
a {
// properties..
}
Change the code to this:
.menu > ul > li:first-child a {
color: red !important;
}
Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)
You forgot to add anchor selector at the end of:
.menu > ul > li:first-child a {
color: red !important;
}