Solved

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

Posted on 2014-12-09
3
1,080 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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now