Bootstrap 3 - Fixed Header (centered)

HTML & CSS
1

I would like to have a fixed header with a logo and a main navigation at the top of my site. This can be done easily enough with CSS and position:fixed with 100% width, however, I want my fixed header to adapt responsively with the design and have it constrain to the same width, while remaining centered. The logo should stay in the same place, left aligned to the left side of the content area. When it reaches mobile layout the navigation will change to a hamburger menu (while still remaining responsive with the fixed header). Hope this all makes sense. I’m breaking my brain trying to figure this out…

Is there any way to achieve this using Bootstrap 3?

Thanks!

2

Yup. Do you have an attempt we can help you with?

3

Nothing that’s online unfortunately. Just hoping to figure it out using the conventional Bootstrap markup and styling methods.

Thanks!

4

Here’s a simple basic html/css (not bootstrap) fixed header with a max-width centred inline with the layout.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -ms-box-sizing: inherit;
    box-sizing: inherit;
}
html, body {
    margin:0;
    padding:0;
}
.header {
    position:fixed;
    left:0;
    right:0;
    width:1000px;
    max-width:1000px;
    height:100px;
    background:red;
    margin:auto;
}
@media screen and (max-width:1000px) {
.header {
    width:auto
}
}
.wrap {
    max-width:1000px;
    margin:auto;
    border:1px solid #000;
    padding:110px 10px 10px;
    background:#f9f9f9;
}
</style>

<!--[if lt IE 9]>
<style>
.header{width:auto}
</style>
<![endif]-->

</head>

<body>
<div class="header"> This is the fixed  header</div>
<div class="wrap">
        <p>Content starts here</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
        <p>test scroll</p>
</div>
</body>
</html>

Note that as usual with all fixed elements you have to account for the space that they take up so you cannot have varying height headers or have content that will wrap. You can get around this to some degree using media queries to increase the headers height (and the padding-top on the content) as the page gets smaller.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.