I want to change the text color of my bootstrap navbar. How should I go about doing this in css?
To be more specific, I want to change the text color of the labels A, B, C, D.
Here is my code:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">A really cool title!</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>A</li>
<li>B</li>
<li>C</li>
<li><a id="d.html">D</a></li>
</ul>
</div>
</div>
Very basic CSS will do this.
.navbar-nav > li > a {
color: red;
}
If you're using less file you can override with variable #navbar-default-color and much more thing else.
Link for navbar variables : http://getbootstrap.com/customize/#navbar
You can also generate a custom bootstrap version as you need, just read tho official doc here : http://getbootstrap.com/customize/
Related
I've seen some similar q's but the solutions weren't working possibly because I'm using bootstrap. The body of my page is a gradient of two colors running vertically. The header is fixed and should be adopting the corresponding color of the gradient. Thus I made it transparent. I would like to hide all elements going under the header.
html
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 id="home-h1">title</h1>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">navitem</li>
<li>navitem</li>
</ul>
</div><!--/.nav-collapse -->
</div>
css
body {
background: -webkit-linear-gradient(#99DAD2, #FEECA4);
background: linear-gradient(#99DAD2, #FEECA4);
}
.navbar-default {
/* navbar background color */
background-color:transparent;
}
I have a Bootstrap navbar for my site for my menu. It's only used for mobile devices so the menu is always collapsed, into a standard navbar collapse button. This is aligned right; what I want, is a back-button in the same navbar that looks just like the menu collapse button, just with a different glyphicon (chevron-left), aligned left. Any ideas as to how to achieve this?
This is the menu code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Meistro</li>
<li>Deelnemers</li>
<li>Jury</li>
<li>Het orkest</li>
<li>De Harmonie</li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li>Nieuwsbrief</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here's a working example of the below: http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
Add a new Button right above your other button:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
Note that I've added a new class called navbar-left. You can rename this to whatever you want to (such as back-button). I'm also using the glyphicon left chevron that ships with Bootstrap by default, you can change it out if you're using FontAwesome or something else.
Add the CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
Should be it -- tweak it from there to fit your purpose. Hope this helps.
The following code displays a navbar always on the top of the page.
I need the second container (content) to be positioned at the end of the navbar and not under it.
At the moment second container is under the navbar.
I could add some empty space on the top of the content are, but I am not sure it is a good approach.
Any idea how to solve it?
<div class="container">
<div class="row">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
</div>
</div>
<div class="row">
<div ng-view></div>
</div>
</div>
Updated 2018
Bootstrap 3
According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..
"The fixed navbar will overlay your other content, unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high."
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f
Bootstrap 4
Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:
<body class="pt-5"></body>
You would need some CSS like this:
body {
padding-top: 20px;
padding-bottom: 20px;
}
Or like this:
.navbar {
margin-bottom: 20px;
}
Make sure you only use what you need,
Just add margin-top: 50px; to the underlaying container.
50px has to be the height of your navbar.
I was able to solve this issue using the following code.
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KanbanBoard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Boards</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User</li>
</ul>
</div>
</div>
</nav>
<!-- boards -->
<div ng-view></div>
</div>
Hi I am trying to customize the boostrap default navbar.
I do not expect you to do all my work, but I need help to style the li field so it hangs over the navbar.
How do I make that?
Code I have:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavigation-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-lg hidden-md hidden-sm" href="#">Caleum Wellness</a>
</div>
<div class="collapse navbar-collapse" id="mainNavigation-collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss</li>
<li>Behandlingar</li>
<li>Tidsbokning</li>
<li>Blogg</li>
<li>Kontakta</li>
</ul>
</div>
</div>
</nav>
The first image show how it is now, and the second image is how I want it.
You can try the Bootstrap customizer http://getbootstrap.com/customize/
Just change less variables how you want and then download it.
Solved the issue by creating a background image with height lower than the navigation wrapper.
The wrapper is still the same size but it looks like it is smaller.
When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.
I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img src="#"></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">Home</li>
<li>Pronunciation</li>
<li>Downloads</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice, how I can get my menu back?
This is my site
.navbar-nav {
margin-right: 0px !important;
height: 51px;
}
The 51px height is limiting your collapsible nav to show entirely.
** Not related to your question **
When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.
Check your HTML for this element: #home #banner .centered .row. It's showing a scrollbar on my browser.