I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%
Related
Instead of using the branding of Bootstrap 3, I am after a responsive navbar that has my logo at the leftmost position of the navbar with required menu options just next to the logo on the navbar.
The issue I am not sure how to handle is that, as I want this navbar to be responsive, when the screen size is reduced to say a iPhone size, I want my typical Bootstrap hamburger menu positioned to the right-most of the navbar and when pressed, will reveal my menu items only but at the same time, I want my logo to always maintain the left-most position on my navbar, no matter what screen resolution is used.
I have provided the basic structure of what I have at the moment but unsure how to include my logo or for examples sake, a link for now to always remain on the navbar and always at the left-most position.
I have created http://www.bootply.com/HcZhCxMC4s for sample but it's not perfect as I am unsure how to position logo/link with menu items.
<nav class="navbar navbar-default" role="navigation">
<ul class="my-logo">
<li>Logo Link</li>
</ul>
<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="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</nav>
You just need to use the same markup of the Bootstrap Navbar ...
<nav class="navbar navbar-default" role="navigation">
<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>
/*YOUR LOGO OR LINK HERE WITH THE CLASS NAVBAR-BRAND*/
<a class="navbar-brand" href="#">Logo Link</a>
Check the BootplyDemo
you may want to add some styling:
css:
#media all and (max-width: 768px) {
.navbar-header {
position: absolute;
right: 0;
top:0;
}
.my-logo {
height: 50px;
padding-bottom: 0;
margin-bottom: 0
}
.my-logo li a {
line-height: 50px;
}
http://www.bootply.com/9KstQ2THvF#
Is this what you're after?
simplest answer on bootstrap's documentation page :
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
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;
}
I am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I'd like to be able to make it stick to the left of the window. Is there a particular reason not to do this?
Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.
My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren't hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
The brand is "centered" because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.
I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Project name</a>
<div class="container">
<div class="nav-collapse collapse">
...
Maybe there is simpler way to do this (with recent versions of bootstrap at least).
Just replace the <div class="container"> by <div class="container-fluid">.
This will make sure that the container for the content of your header spans the full page width.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
...
Here is the code for navbar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="index.html">EasyUniv</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>Services</li>
<li>Campus</li>
<li>Advertise</li>
</ul>
</div>
</div>
</div>
</div>
The example is at: www.easyuniv.com/staging
when you make the screen smaller it hides the nav buttons correctly but they do not go into the little drop down like it should. also at certain widths there is weird padding.. been trying different things and can't get these to work.
Thanks
You need to include jQuery before bootstrap.
I downloaded the bootstrap template from http://www.initializr.com/
My question is how do I keep the navbar fixed on top of the screen whenever I scroll down to the footer of my web page? To have a better idea of what I'm trying to achieve I made a screenshot.
example : On a mobile device perspective the NAVBAR is fixed
example : When I scroll down to the footer of the page I want the NAVBAR to stay fixed on top of the screen. As you can see the NAVBAR fails to stay fixed on top of the screen.
CODE:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Product and Services
</li>
<li>
Investor Relations
</li>
<li>
Get Support
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Search">
<button type="submit" class="btn btn-default">
<i class="icon-search icon-black"></i>Go
</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
How do I achieve this?
Just wrap the navigation bar inside a div and add these css classes to it style it as class="navbar navbar-fixed-top"
Example: http://jsfiddle.net/codovations/Uy5tt/show/
P.S: remove show from the end of the url to see the html
Update: Basically this is what they apply to the div to make it fixed on the top.
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}