Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Sarah Bradberry
Sarah Bradberry
7,115 Points

Mobile Nav Menus - Force Content Down

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" />


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

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

    <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> 

and my CSS

/* Top Nav */

#navbar {
    background-color: #fbd8e3; 
    width: 100%;
        overflow: hidden;

nav {

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

#menu-icon {

    width: 45px;
    height: 45px;


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 {



    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)