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.
Related
Good day! The problem appears with actual Chrome version I already have.
This is the actual Chrome version I have 99.0.4844.51
Suddenly discovered that menus (we uses simple downloaded several years before with some style change) on our website go now wrong, for example that there is no font highlight (change colors) on menu hover
Before it was:
nav ul li:hover {
color: white; /* color menu active font */
background: #005DAB;
}
Now it doesn't work and was implemented also additional:
nav ul li a:hover {
color: white;
}
To make it highlighted as before.
I'm attaching complete JS fiddle with code
But together with it appeared other very strange story - disappearing of menu buttons after hover. Because probably it cannot show in other browsers I made Youtube video to show completely.
I'm sorry but I don't know where is the mistake and what to do. Your assistance is kindly appreciated!
I think issue is happening in menu items which has children. You can try this css if it works:
#media (min-width:761px){
li.sub:hover a, li:hover a {
color: white !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li a{
color: grey !important;
}
}
#media (max-width:760px){
li.sub:hover ul a {
color: white !important;
}
li:hover a {
color: #005DAB !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li.sub a:hover {
color: #005DAB !important;
}
li a {
color: white !important;
}
}
I create 2 buttons on one line and have some problem with styling them correctly with the template i'm using.
The button has 4 states but when client is active it goes wrong.
The first state is when nothing is happens.
The second state is when the + sign is active or in hover status
On de third state when i hover over clients i get this:
which works correctly.
But when the client is active i get the same result as when nothing is active.
So what could i do to get the active state equals to the hover state from picture 3.
the html goes like this:
<li ui-sref-active="active" class="clearfix li-button"> <a class="btn btn-primary-li-left" ui-sref="app.clients" ripple=""><em class="sidebar-item-icon icon-head"></em> Clients </a> <a class="btn btn-primary-li-right " ui-sref="app.addclient" >+</a> </li>
I use app.html as template where i have this:
<aside ng-include="'html/main/templates/sidebar.html'" ng-class="app.theme.sidebar"></aside>
the class app.theme.sidebar == #bg-white
The css i added is this it works without the template :
.li-button a{
float:left;
display: block;
}
.li-button a:first-child{
width: 77%;
}
.li-button a:last-child{
width: 15%;
margin-left: 2%;
margin-right: 2%;
color: #ffffff;
}
.btn-primary-li-left {
text-align: left;
vertical-align: middle;
font-weight: 900;
height: 40px;
}
.btn-primary-li-right {
height: 40px;
text-align: center;
vertical-align: middle;
font-weight: 900;
}
.li-button a:last-child:hover {
color: #ffffff;
background: #0493ac;
}
.li-button a:first-child:hover +a:last-child{
color: #ffffff;
background: #0e8eac;
}
I think it has something todo with this which is from the template :
#bg-white .nav > li.active,
.bg-white .nav > li.active {
background-color: #0df9ee !important;
}
#bg-white .nav > li:hover > a,
.bg-white .nav > li:hover > a {
background-color: #00f3bd;
}
#bg-white .nav > li.active > a,
.bg-white .nav > li.active > a {
background-color: #f32400;
}
EDIT
So i did a bit modification on the answer of Shane but i still do not get the result i wanted it got even weirder.
if i do this the button is green
#bg-white .nav > li > a.btn-primary-li-left,
.bg-white .nav > li >a.btn-primary-li-left{
background-color: #05f900 !important;
}
but when i add the active element nothing happens and get the same result as the first picture in this question.
#bg-white .nav > li > a.btn-primary-li-left.active,
.bg-white .nav > li >a.btn-primary-li-left.active {
background-color: #05f900 !important;
}
You're not targeting the same selector structure, remove the #bg-white ... CSS for .active and try this:
.li-button.active a:first-child + a:last-child {
color: #ffffff;
background: #0e8eac;
}
.li-button.active a {
background: #eee;
}
Working example: http://codepen.io/anon/pen/PPdOvZ?editors=110
EDIT
Based on your edit, the active class isn't being applied to the anchor tag. It's being applied to the li, change your updated code to this:
#bg-white .nav > li.active > a.btn-primary-li-left,
.bg-white .nav > li.active > a.btn-primary-li-left {
background-color: #05f900 !important;
}
Why does the text not remain white once hover is engaged? Should the active state keep this white?
a:hover {
color: green;
}
nav ul {
background-color: #444;
text-align: center;
}
nav a {
color: #fff;
}
nav a.active {
color: #fff;
}
nav a:hover {
background-color: #005f5f;
}
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
Well, you did set the color to green on hover. Remove that declaration and you should be good to go:
/*a:hover {
color:green;
}*/
Edit:
To answer your second question, the active "state" (in your CSS it is a class) keeps it white because the selector nav a.active has a higher specificity than a:hover.
Remove the following.
a:hover {
color:green;
}
Or if you wish to understand what's happening, change it to:
a:hover {
color:red;
}
Use CSS for the required text
a:hover {
color:#000000;
}
I have some silly CSS problem. Cant get my navi bar working the way I would want it.
Problem is, that it keeps the arrows under anchor text somehow.
This is example of html:
<ul id="navi">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and stylesheet:
#navi {
list-style: none;
padding: 0.5em;
}
#navi li {
float: left;
display: inline;
list-style-type: none;
}
#navi li a {
display: block;
font-weight: normal;
font-size: 13px;
color: #222;
padding: 0.2em 1em;
text-decoration: none;
}
#navi li a:hover, #navi li a:active {
background: #5ea0ff;
color: white;
text-decoration: none;
}
#navi li a.selected {
background: #444;
color: white;
text-decoration: none;
}
#navi li:after {
content: "\25B6";
}
#navi li:last-of-type:after {
content: "";
}
This is how it looks like: http://jsfiddle.net/M2AHY/1/
I want the arrows right after anchors, but I can't use a:after (which works good, but hovers with anchor text)
Thanks
This is due to the fact that the element the arrow is appearing after, the anchor tag, is styled with display:block - a property which by itself, will push subsequent content to a new line. If altering this slightly won't be a problem, you could replace the style with:
#navi li a {
display: inline-block;
}
Which allows the arrow to appear on the same line. Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
EDIT: Alternatively, you may apply a float to the anchor tag. For example:
#navi li a {
float:left;
}
This lets you retain the block display, but also allows the arrow to appear on the same line.
A simple approach to resolving this would be:
#navi li a:after {
content: " \25B6";
}
Note that I've added the content after the and put a space in the content. Hope that helps!
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;
}