Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-12-09
3
Medium Priority
?
1,602 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
2 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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

772 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