I would like my navbar to be divided into 12 sections with each element taking up 1 section, i.e have 12 elements in the navbar. I would also like them to start from the very left of the screen, instead of what I currently have in the image below;
I thought container-fluid and navbar-left would align the elements fully to the left of the navbar but I am really struggling in trying to move them over.
What I Have Tried (my code so far)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I able to A) Align all the elements in the navbar fully to the left and B) Divide the navbar into 12 "sections" that each element shall take one of?
I am using Bootstrap v3.3.7.
Add the row class to the container:
<div class="container container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Directories</li>
<li>Contracts</li>
<li>Processes</li>
<li>Filing</li>
<li>My Profile</li>
</ul>
</div>
</div>
</div>
#RenderBody()
</div>
jsFiddle
A)
I think you have to take away the container class in the first line, like that:
<div class="container-fluid">
B)
You can add the col-md-1 Bootstrap class to the li elements, like that:
<li class="col-md-1">Directories</li>
If you inspect the navbar you created you will find some padding/margin left generated by bootstrap, just add your own class to that element and set margin or padding you want. You can create as many li elements as you want.
Related
I am new to Stack Overflow so please forgive me if this is a repeat question. I searched thoroughly, but could not figure this out.
I am building a zipline portfolio page using mostly Bootstrap v3.3.6 and cannot get my section links to navigate properly.
Here is a sample of my markup including the nav:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Matthew Shelbourn</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Bio</li>
<li>Projects</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Body Section1 -->
<div>
<a name="bio"></a>
</div>
<div class="container" style="background-color:cadetblue;">
<div class="row">
<div class="col-xs-12 col-md-4">
<span><img id="profile-image" class="img-responsive pull-left" style="margin-top: 4.1%; margin-bottom:4.1%;" src="#"></span>
</div>
When I click on the link in my nav for "Bio" (or any of the other sections) it doesn't navigate to the top of the corresponding section. Instead, it navigates to an area about 1/3 of the way down from the top of the section.
This same issue happens with every section link I have. I'm sure it's something trivial, but what am I doing wrong? Thanks!
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!
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.
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;
}