Mobile Nav Menus - Force Content Down

Question

I'm redesigning my site and would like to have a drop down menu that pushes the page content down when shown on mobile devices.

I'd like it to work like the treehouse blog menu.

Could anyone please point me in the direction of a tutorial on how to do it? I have my drop down menu in place, I'm just not sure how to make it push the content down.

Here's the snippets of code as I have them so far (the drop down isn't properly styled to suit my site yet):

Here's how I've done the HTML (following a treehouse blog post)

<div id="navbar">  
<div class="search"><form action="../search/results.html" id="cse-search-box">

       <span class="hide_mobile"> Search for more Singercraft tutorials and patterns</span>
            <input type="hidden" name="cx" value="cut-for-privacy" />
           <input type="hidden" name="cof" value="FORID:10" />
           <input type="hidden" name="ie" value="UTF-8" />
           <input type="text" name="q" size="25" />
           <input type="submit" name="sa" value="Search" class="search-button" />

</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script></div>
<nav>

<a href="#" id="menu-icon"></a>

<ul>
    <li><a href="../index.html">Home</a></li> 
    <li><a href="../shop/patterns/index.html">Books &amp; Patterns by Sarah</a></li>
       <li><a href="../blog/">Blog</a></li>
       <li><a href="../butterfly/index.html">Butterfly Looms</a></li>
       <li><a href="../crochet/index.html">Crochet</a></li>
       <li><a href="../scrapbook/index.html">Edwardian Scrapbook</a></li>
       <li><a href="../embroidery/index.html">Embroidery and Sewing</a></li>
       <li><a href="../hairpin-lace/index.html">Hairpin Lace</A></li>           
       <li><a href="../knitting/index.html">Knitting</a></li>
       <li><a href="../crafts/index.html">Misc Crafts</a></li>
       <li><a href="../gallery3">Photo Galleries</a></li>
       <li><a href="../recipes/index.html"> Recipes</a></li>
       <li><a href="../singercraft/index.html">Singercraft Guide</a></li>
       <li><a href="../small-looms/index.html">Small Looms</a></li>
       <li><a href="../spinning/index.html">Spinning</a></li>
       <li><a href="../tatting/index.html">Tatting</a></li>
       <li><a href="../teneriffe/index.html">Teneriffe Lace</a></li>
       <li><a href="../writing/index.html">Writing</a></li> 
    </ul>
</nav>
</div>

and my CSS

/* Top Nav */

#navbar {
    display:block;
    background-color: #fbd8e3; 
    width: 100%;
    margin-bottom:1.2em;
        overflow: hidden;
}

nav {

    float: right;
    padding: 5px;   
    background: #fbd8e3;
    margin-bottom: 1.2em;
}

#menu-icon {

    width: 45px;
    height: 45px;
    background-image:url(graphics/menu-icon.png);
    background-position:center;

}

a:hover#menu-icon {

    background-color: #444;
    border-radius: 4px 4px 0 0;

}

nav ul {

    list-style: none;

}

nav li {

    display: inline-block;
    float: left;
    padding: 10px

}

section {

    margin: 80px auto 40px;
    max-width: 1000px;
    position: relative;
    padding: 20px

}

/*Nav Bar shrinkage at 768px*/
@media only screen and (max-width: 768px) {

/*  header {

        position: absolute;

    } */

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;

    }

}

(Edited because I forgot to put some of the css in)

Welcome to the Treehouse Community

Looking to learn something new?

Sarah Bradberry

Sarah Bradberry

Mobile Nav Menus - Force Content Down