I'd like to override the nav link-color in a role=presentation for a nav list. I'd like to set it to yellow. I am only looking to select this one instance.
the html:
<ul class="nav nav-pills nav-stacked">
<li role="presentation">About</li>
I have:
li[role=presentation] a:link{
color:yellow;
}
But this doesn't work. Any ideas on how to get this to work?
take the :link out of your css selector
li[role=presentation] a{
color:yellow;
}
<ul class="nav nav-pills nav-stacked">
<li role="presentation">About</li>
<li role="">About</li>
<li role="presentation">About</li>
</ul>
Try:
li[role="presentation"] a{
color: yellow !important;
}
Related
I have this vertical that i am trying to customize
<ul class="tracking_nav nav nav-tabs nav-stacked">
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
<span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span><span class="linkso">TrackingPlaybackCommands</span></li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
This is the css
moving_status{
float:right;
color:#76EE00;
font-weight:bold;
}
.linkso{margin-left:13px;}
.topinfo{
display:inline-block;
margin-bottom:5px;
}
.linkso > a{
margin-right:4px;
}
This is the fiddle https://jsfiddle.net/codebreaker87/eoo87zkk/
I have tried .tracking_list_type > li:hover{background-color:none !important;} but i cant seem to target the li element.How can i fix this?.
You need to target hover backgrounds with :hover. For your case, you need the following:
.nav-tabs>li>a:hover
However I would recommend
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover
Total Bootstrap newbie here (and still learning CSS) so big apologies if this is a dumb question...
I had constructed a Bootstrap nav bar with the last link as a button element but then realized it was better practice just to make it an anchor element instead:
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Quote Request</li>
</ul>
</div>
The btn-primary styling no longer shows up now that it's nested in the link element though and I can't seem to write the CSS so that it 'sees' this styling and overrides the default styling on the div:
#tcsnavbar-links {
padding-right: 20px;
}
#tcsnavbar-links ul li a {
color: #5f5f5f;
}
#tcsnavbar-links ul li a:hover {
background-color: #eeeeee;
color: black;
}
.btn-primary {
background-color: #00afec;
border-color: #0296ce;
font-size: 1.1em;
}
.btn-primary:hover {
background-color: #0077c5;
}
If anyone can point me in the right direction it would be much appreciated, thx :}
I found your Problem interesting and started to read the Bootstrap docs and tried some things.
In my understanding it's not good practice to use the anchor element when you want a button. So when you want a button then use the button element.
Source
But in most cases it works fine and is also intendet to use the button classes on the anchor element. For example you want some Button anywhere on the page that links to the following page like a Next Button.
But not when you use it within .navbar-nav. The Docs explictly say
Context-specific usage
Like the standard button classes, .navbar-btn can be used on <a> and
<input> elements. However, neither .navbar-btn nor the standard button
classes should be used on elements within .navbar-nav.
Source
But what you can do is to use nav-pills for this one element like this. Then you have a buttonlike link in the navbar
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav nav-pills navbar-right">
<li><button href="#" class="btn btn-primary navbar-btn" type="button">Quote Request</button></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Bootply
When my nav collapses, the links take up the full width of the screen. How can I make it just the width of the text inside? I've tried targeting the ul and the li css with no luck and an not sure how to approach this. Any suggestions on what style would fix this?
<div class="collapse navbar-collapse pull-right" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About</li>
<li>Experience</li>
<li>Skills</li>
<li>Graphic</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div>
You could use something like this:
#nav-collapse > .nav > li {
display: inline-block;
}
I added font-awesome icons to my navbar and styled it with css. All works well except on the link with the dropdown list - once clicked - it shows two icons instead of only one (see screenshot). One is properly placed and the other one appears below the word 'link' and above the dropdown menu.
Here is the html code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
and here the css code:
ul li a:before {
font-family: "FontAwesome";
content: "\f067";
position: absolute;
top: 0;
left: 0;
display: block;
text-align: center;
color: #FFF;
width: 100%;
height: 100%;
margin-top: -26px;
}
I would greatly appreciate it if someone could tell me how to get rid of the icon (=white cross) under the word dropdown.
Thanks in advance for your help.
I think that you are seeing extra + icons because your css selector is incorrect. In actual fact you are probably getting 5 extra + icons (1 for each <a> in the dropdown menu).
To solve this you need to target only the <a>'s under the navbars <ul> not the dropdowns <ul>
try this selector: ul > li > a:before
EDIT
I have forked and corrected your bootply below:
http://www.bootply.com/OSTDVMekNE
The issue was on line 52 of your css (in bootply)
.cross a:before, .cross:hover > a:before {
should have been
.cross > a:before, .cross:hover > a:before {
The thing is that your CSS is applying to way more that you want it to. Your imbedded UL is also triggering your CSS rules. You probably have even more white crosses appearing but you can't see them because your background is white.You should apply a class to the links that you want to have your white cross and then apply the css rules only to that class.
I need my submenu links to have a different border-color than the parents list one.
My menu
<ul id="menu">
<li>Link</li>
<li>Link</li>
<li class="menuActive">Link
<ul class='children'>
<li>subLink</li>
<li>subLink</li>
<li>subLink</li>
</ul>
</li>
</ul>
My CSS :
#menu li a{
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:red;
text-decoration:none;
}
.children li a{
border-bottom-color:blue;
background:lightgray;
}
As you can see, my subLinks get red border, how can set blue ones just for them ?
See it in jsFiddle
Use #menu .children a.
This is a problem concerning specificity.
Live Demo
You need to read up on CSS Specificity http://css-tricks.com/specifics-on-css-specificity/