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>
Related
I want to make the background image of the jumbotron to have full size without needing to state the height in pixes. Reason for that is that I want it to be responsive. Also I want the image to be underneath the transparent navbar.
You can take a look here
The code for it is:
<nav class="navbar-inner navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Cosmos</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron" id="first">
<h1 class="text-center" id="h1first">
Welcome to Cosmos<br>
web design
</h1>
</div>
</div>
</div>
The css is:
.navbar-inner {
background:transparent;
}
#first {
background-image: url(http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg);
background-size: cover;
height: 900px;
}
You could use a min-height of 100vh for your hero. And you have to position your navbar absolutely, like this:
https://codepen.io/Sixl/pen/oBrxKr
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 am facing an issue with Bootstrap 3. I have a single page navigation with sections and a fix after scroll navbar. As it scrolls the navbar gets fixed and changes background color. However when it comes to small screens the navbar isnt collapsing and it doesnt remain fixed.
This is part of the html.
<div class="navigate clearfix">
<div class="inner">
<h3 class="navigate-brand">Brand</h3>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" >
<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" id="menu">
<ul class="nav navigate-nav menu-right" >
<li class="active">Home</li>
<li>s1</li>
<li>S2</li>
<li>s3</li>
<li>s4</li>
</ul>
</div>
</nav>
</div>
</div>
The js with the background change:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".navigate").css({"background-color" : "red"});
}else{
$(".navigate").css({"background-color":"transparent","background":"transparent"});
}
})
})
You may want to follow the instructions in: https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Based on the above, I have prepared a fiddle for you where navbar remains fixed at any given width of screen: http://jsfiddle.net/dmv73fzr/
Hope it helps you!
How do I set the width of the links in my nav bar (including the brand name) so that it's 960px wide and centred within the page? I still want the background of the navbar to stretch the full width of the browser and also still want my responsive button to work when collapsing down.
I've tried various methods but can't seem to get it to work. Do I need to seperate out the background of the nav bar from the text and centre it somehow?
Here is my HTML mark up:
<div class="container">
<!-- row 1: navigation -->
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#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="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add a new class to your navbar:
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
And the following CSS definition:
.navbar-custom {
width: 960px;
margin: 0px auto;
}
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.