CODEWITHSUNDEEP
htmlcss
batman191
batman191

Reputation: 57

fixed header above not fixed navbar

So I have this markup:

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
        <button id='edit'>
            <i class="fa fa-pencil"></i>
        </button>
        <button id='check'>
            <i class="fa fa-check"></i>
        </button>
        <button id='trash'>
            <i class="fa fa-trash-o"></i>
        </button>
    </span>
</header>

<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
...

And I want the header to be fixed, and the navbar to scroll.
So I added this to the CSS:

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

nav { 
  margin-top: 1em;
}

But the result is not what I wanted. I tried adding clear: both to every element but nothing has changed.
EDIT: This is how it should look like, but the header should be fixed.

Upvotes: 1

Views: 521

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You'll need to set the height of your header to a fixed height (in em or in px). Then add a padding top to your body with the same number.

body {
    background: #e5e5e5;;
    font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
    margin: 0; padding: 0;
    color: #444;
    height: 2000px;
    padding-top: 50px;
}

header {
    background: #4285f4;
    color: white;
    padding: 12px;
    padding-left: 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    height: 26px;
    margin: 0;
    top: 0;
}

And take away the margin of the nav.

Check this Fiddle.

Upvotes: 4

Lee
Lee

Reputation: 4323

Add a wrapper div for your nav, and the rest of the page, and set a margin-top to clear the header div.

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
    <button id='edit'>
        <i class="fa fa-pencil"></i>
    </button>
    <button id='check'>
        <i class="fa fa-check"></i>
    </button>
    <button id='trash'>
        <i class="fa fa-trash-o"></i>
    </button>
    </span>
</header>

<div id='wrapper'>
<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
</div>

CSS:

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  top:0;
}

.wrapper { 
  margin-top: 3em;
  display:block;
}

Upvotes: 0

Related Questions