Solved

How to create a fixed width, fixed position header in Bootstrap

Posted on 2014-12-09
3
1,161 Views
Last Modified: 2015-02-07
The default fixed-top navbar in Bootstrap spans the full width of the viewport. I want to contain it within a container div. I am able to contain the left side using the following CSS override:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  width:100%;
 right: auto;
  left: auto;
  z-index: 1030;
}


But the navbar still extends full window on the right.  Giving a definite width to the navbar does work, but it destroys the menu collapse.  

Any help would be greatly appreciated.
0
Comment
Question by:dlearman1
3 Comments
 

Author Comment

by:dlearman1
ID: 40490649
Hi Mandeep,

Thanks for the comment.  The demo is for a full-width layout which isn't what I want.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40491164
You need to physically move the <nav> block from the top of the markup and paste it into the first content container.

Instead of this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
</nav>
<div class="container theme-showcase" role="main">
...
</div>

You need this:
<div class="container theme-showcase" role="main">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    ...
    </nav>
...
</div>

Then, for this css definition, change to:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  z-index: 1030;
}

You will also need to remove the padding from this definition:

.container {
    margin-left: auto;
    margin-right: auto;
   /* padding-left: 15px;
    padding-right: 15px;*/
}

...and add it to this definition:

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0;
    margin-right: 0;
    padding: 0 15px;
}

Then you will need to add a media query to get the menu width back to 100% width for small screens.

@media only screen and (min-width: 319px) and (max-width: 770px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
       width:100%
    }
}
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question