Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-12-09
3
Medium Priority
?
1,528 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 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's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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…
Read about why website design really matters in today's demanding market.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
Suggested Courses

660 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