I'd like to override the font color when I hover over a tab/link on my navbar. I currently have the following HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class = "container">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class ="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li >Link</li>
</ul>
</div>
</div>
</div>
I just would like the tabs on the right to turn a different color. I understand pseudoselectors, I'm just wondering how I'd properly do this with my own CSS. Thanks!
If the selector is specific enough, you can avoid usage of !important. In this case, you would use:
.nav.pull-right > li > a:hover {
/* style .. */
}
jsFiddle example
Alternatively, you could also use .navbar-inner .container .nav.pull-right > li > a:hover
Related
I'm working on a navbar with bootstrap and the hover effect in css isn't working and i added the hover pseudo class to my anchor tag
<!DOCTYPE html>
<html>
<head>
<style>
li a:hover{
background-color: green;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse mynav">
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Work</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
when you want to customize bootstrap elements use the !important attribute in your css like so
li a:hover{
border-bottom: 2px solid blueviolet !important;
background-color: ;
}
I have this header in my Bootstrap template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
DDButtonText <strong class="caret"></strong>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.
How do I make my menu be the same size as the button regardless of browser, always?
You can try adding this:
CSS:
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply: http://www.bootply.com/MfkTjxasD7
I'm trying to pin a navigation link in the upper right. This works great in Chrome and Safari, but not in Firefox (Update: also not in IE). I don't know if I'm doing something wrong or if it is a bug in FF.
Here's a bootply and the code:
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-spy="affix" data-offset-top="40">Link fixed</li>
</ul>
</div>
</div>
</nav>
CSS:
body {height:1500px;}
.navbar-default .navbar-right>li>a {background:#333; color:#fff;}
.navbar-right .affix {position:fixed;}
Any ideas on this?
Thank you.
The reason is initially the link is static which is 16px(15px padding-right of .container-fluid + 1px border-right of .navbar) away from the right of the container. When the user scrolls downs and the link becomes fixed, the fixed position is set with respect to the page. You can try setting the below style and see it helps you, but i don't understand why Chrome and FF is behaving different.
.navbar-right .affix {
position:fixed;
right:16px;
}
I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/
im trying to center my navbar with no luck at all.. Anyone here knows how to center it?
Here's my code:
<nav class=" navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
I cant find the rows in bootstrap.css, but if you really need the code from the css doc, i try to find it.
This one works :- DEMO
<div class="text-center">
<nav class=" navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
</nav>
</div>
CSS
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
}
Try to add css .navbar-nav li {display:inline-block;} <-- this let all <li> tags lined up.
Check this FIDDLE to view more details.
Let me know if this was what you're looking for :)
Updated 2017
In Bootstrap 3.x, you can use the nav-justified class... No custom CSS required:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>HEM</li>
<li>OM</li>
<li>VAD ÄR VI?</li>
<li>TJÄNSTER</li>
<li>VARFÖR?</li>
<li>KONTAKT</li>
</ul>
</div>
</nav>
https://www.bootply.com/109568
Bootstrap 4 there is the nav-fill class...
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.bootply.com/bjgAw3F3Ps
FIDDLE
just a little fix to what #Fiskolin has done, if you want it to always be centered you should make sure that the UL will center all text by adding this to it.
ul { text-align:center; }
I am using this for Bootstrap v3.
#media (min-width: 768px) {
.navbar ul {
float: unset !important;
justify-content: center;
display: flex;
}
}