B6F6 B6F6 - 6 months ago 11
HTML Question

Navbar not sticking to the bottom of the header element

So I'm trying to stick this navbar onto the bottom of a header but it sticks to the top of it instead of the bottom (which I want). The nav should stick to the bottom of the header and stay that way when the user scrolls down.

As of now the header and nav are set to position:fixed and hover over the text as it scrolls down (like it should)...but the nav sticks to the top of the header instead of the bottom, thus cutting off the first part (1) in this case. I'm sure it's super simple but can I get an idea of how to fix that with only css? I'm not sure how to do this for non-nested elements that are fixed (as they don't stack normally)

<div id="wrapper">
<header></header>

<nav>
<ul>
<li href="#">1</a></li>
<li href="#">2</a></li>
<li href="#">3</a></li>
</ul>
</nav>

<main>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>

</main>
</wrapper>


html

header{
position: fixed;
background-color: #333;
padding-left: .5rem;
width: 100%;
font-size: 1rem;
padding-bottom: 1rem;
padding-top: 1rem;
z-index: 100;
}

nav{
position: fixed;
top 0;

display:block;
background-color: yellow;
width: 10rem;
}


css

This illustrates what is happening right now:
http://codepen.io/anon/pen/XKbVVX

Answer
nav
{
 position: fixed;
 top: 48px;
 display:block;
 background-color: yellow;
 width: 10rem;
 }

Pen

Have position:relative; in wrapper div and position:fixed; in nav