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

CSS

Posted by Matthew Boysel
Matthew Boysel
295 Points

CSS Nav Fix

Can't figure out how to put the nav where the whitespace is on http://doctorladybug.com/

It 's floating above where the nav should be, in front of the header image. Any help would be greatly appreciated!

2 Answers

Shawn Jones
Shawn Jones
15,579 Points

Your navigation bar is wrapped in your header div. currently you have this:

<div class="container headerImage">

                <!-- BEGIN MAIN NAVIGATION  -->
        <div class="menu-button"><i class="icon-menu"></i>
                    <a style="position:relative;z-index:100;color:#222222; margin-left:12px;display:inline-block;" class="popup-with-zoom-anim toggle-button md-trigger" href="#small-dialog"><i class="icon-search-1"></i></a>
    <div id="small-dialogs" class="zoom-anim-dialog mfp-hide">
    <!-- BEGIN SEARCH FORM -->  
    <div class="sb-search">
                        <form class="navbar-form" method="get" action="http://doctorladybug.com/" accept-charset="utf-8">
                            <input class="sb-search-input" placeholder="Search term..." type="text" value="" name="s">
                        </form>
                    </div>
<!-- END SEARCH FORM -->    </div> 
            </div>
        <nav class="nav nav__primary clearfix"> 
            <ul data-breakpoint="800" id="menu-main" class="flexnav"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://doctorladybug.com/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://doctorladybug.com/about-organic-farmer-kelsey-ca/">About</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://doctorladybug.com/gallery/">Gallery</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://doctorladybug.com/contact">Contact</a></li>
</ul>           
         </nav>
        <!-- END MAIN NAVIGATION -->


    </div>  <!--<div class="row"> -->

<!-- </div> -->         </div>
        </div>
    </div>

You need to take your navigation out of your header div so it's seperate from the image above it.

<div class="container headerImage">

..... (all your other code)

</div><!--closing headerimage div tag-->

now place navigation here

<!-- BEGIN MAIN NAVIGATION  -->
        <div class="menu-button"><i class="icon-menu"></i>
                    <a style="position:relative;z-index:100;color:#222222; margin-left:12px;display:inline-block;" class="popup-with-zoom-anim toggle-button md-trigger" href="#small-dialog"><i class="icon-search-1"></i></a>
    <div id="small-dialogs" class="zoom-anim-dialog mfp-hide">
    <!-- BEGIN SEARCH FORM -->  
    <div class="sb-search">
                        <form class="navbar-form" method="get" action="http://doctorladybug.com/" accept-charset="utf-8">
                            <input class="sb-search-input" placeholder="Search term..." type="text" value="" name="s">
                        </form>
                    </div>
<!-- END SEARCH FORM -->    </div> 
            </div>
        <nav class="nav nav__primary clearfix"> 
            <ul data-breakpoint="800" id="menu-main" class="flexnav"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://doctorladybug.com/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://doctorladybug.com/about-organic-farmer-kelsey-ca/">About</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://doctorladybug.com/gallery/">Gallery</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://doctorladybug.com/contact">Contact</a></li>
</ul>           
         </nav>
        <!-- END MAIN NAVIGATION -->


    </div>  <!--<div class="row"> -->

<!-- </div> -->         </div>
        </div>

hope that helps

Matthew Boysel
Matthew Boysel
295 Points
Matthew Boysel
Matthew Boysel
295 Points

Thanks so much Shawn. Worked out for me!