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/
Related
Below image show the custom navbar style which I want to customise.
Custom style should look like this
I tried this CSS for customisation but not gives me proper styling
.navbar-default .navbar-nav .dropdown.open a:focus {
text-align: center;
color: #286090;
border-bottom: 3px solid red;
background-color: #fff;
}
thank in advance.
So I have a div where the whole thing is an anchor tag and I am trying to control how the color is on hover and getting varying results. Hoping I can do this with just css. What is happening is on hover, one text changes, but not the other. But then also, the text decoration underline is still different. Just want it all to stay black even on hover, but on hover, the url underline appears on the text.
<style>
.welTile > p:hover {
color: black;
}
</style>
<div class="col-md-4">
<a href="#/mod1">
<div class="welTile">
<img src="assets/images/welcomeTile.png">
<p>Module 1: Moneyball Concepts</p>
<p>Learn the basic concepts you need to successfully complete the other 5 modules</p>
</div>
</a>
</div>
And a couple of screenshots of what is happening before and after hovering:
You need to target the different states of the anchor tag like this:
.col-md-4 a {
color: #000;
}
.col-md-4 a:hover {
color: #000;
}
.col-md-4 a:focus {
color: #000;
}
.col-md-4 a:active {
color: #000;
}
This CSS will keep everything to stay in black.
.col-md-4 a, .col-md-4 a:hover, .col-md-4 a:focus, .col-md-4 a:active {
color: black;
display:inline-block;
text-decoration: none;
}
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 am working on a website and I have a problem because when I hover over a menu item, drop down menu item in my navigation as drop down appears white line across my 2 menu items appears on a menu item and next one. I really don't know what is happening. Here is my code for navigation ( I am using Genesis framework for Wordpress)
.genesis-nav-menu a {
border: none;
color: #919594;
display: block;
font-size: 14px;
padding: 20px;
position: relative;
top: 35px;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #C77D3C;
border: 2px solid #C77D3C;
border-radius: 12px;
}
Your .site-header .sub-menu has a border-top. If you remove that one, it is also removed from the page.
I can see you have commented it out in your CSS-file, but it's clearly being applied. Why it is applied is a mystery you'll have to solve yourself. At least now you know where it comes from :)
stroke 1155 on your css file
.site-header .sub-menu {
border-top: 1px solid #eee;
}
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.