So I'm building a website which uses twitter bootstrap.
I want to bring a background color to the .nav-pills navigation bar.
But I have no Ideahow to do this... I did change the color of the buttons though.
How can I change the backgroundcolor of my navigation bar without changing any buttons?
Thanks a lot!
Try code like this.
.basicpillsmenu .nav-pills > li > a {
background-color: #0088cc;
color: #ffffff;
}
.basicpillsmenu .nav-pills > li > a:hover {
background-color: #ff0000;
}
Or
&.active > a {
&,
&:hover,
&:focus {
color: #nav-pills-active-link-hover-color;
background-color: #nav-pills-active-link-hover-bg;
.caret {
border-top-color: #nav-pills-active-link-hover-color;
border-bottom-color: #nav-pills-active-link-hover-color;
}
Related
I have a base CSS that defines this:
a:hover, a:focus {
color: black;
}
I want to have a specific link that overrides and does not trigger focus, but still triggers hover.
How can i do something like this to override the color setting?
a:focus{
color: none;
}
I've tried color:transparent to no avail, focus still triggers.
Try This
a:hover{
color:green;
}
.class:hover, .class:focus {
color: red;
}
dsadsfdsfsd
dsadsfdsfsd
I think you might need like this. This will inherit the color from parent.
a:focus {
color: inherit !important;
}
Please apply this css.
a:hover { text-decoration: none !important; color :none; border: 0px; -moz-outline-style: none;}
a:focus { text-decoration: none !impoartant; outline: none;-moz-outline-style: none;}
You should use initial to set element style to default.
a:focus {
color: initial !important;
}
I am having a hard time overwriting the hover function on twitter-bootstrap for the nav-pills item. I am using Ruby on Rails
Specifically I want to remove the text-decoration: underline from the hovering
How can i go about doing this? here is the source code:
.nav-pills {
li {
float: left;
/* Links rendered as pills*/
> a {
border-radius: $nav-pills-border-radius;
}
+ li {
margin-left: 2px;
}
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: $nav-pills-active-link-hover-color;
background-color: $nav-pills-active-link-hover-bg;
}
} } }
Specifically I want to remove the text-decoration: underline from the
hovering
May be not the best thing to do (well, why not), but since I can't see your code, try this:
.nav-pills > li > a:hover {
text-decoration: none;
}
or rather:
.nav-pills {
> li > a:hover {
text-decoration: none;
}
}
If you post JSFiddle code, I'll edit my answer and give you more precise solution.
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.
Title says it all, my current html for the bootstrap navbar is as follows
This is my html currently: http://pastebin.com/83aUVeBM
My site currently; pixelcmc.enjin.com
at the top of my site, that is my bootstrap
This the default bootstrap setting for tab :
.nav > li > a:hover, .nav > li > a:focus {
background-color: #EEEEEE;
text-decoration: none;
}
Now you can override the default style by adding this line to your CSS file :
.nav > li > a:hover {
background-color: #0000ff; /*Pure blue color */
transition:all 0.3s ease-in-out; /* fade effect on hover */
}