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 Elsa Chen
Elsa Chen
1,906 Points

How do I make my navigation bar not moving around when I stretch the browser window?

I am trying to make a simple website but have hard time position my logo next to navigation bar. Another bigger problem is: I can not make my navigation bar not moving around when I change the browser window size.

My goal is make my website's navigation bar look like this -->http://answers.squarespace.com/

Here is my code. Please take a look, thanks.

    <body>
        <div>
            <header>
                <div class="container">
                        <div id="logo">
                            <a href="index.html"><img src="image/logo.png"></a>
                        </div> 

                    <ul class="nav">
                    <li><a href="theday.html">Wedding Day</a></li>
                    <li><a href="reception.html">Reception</a></li>
                    <li><a href="accommodation.html">Accommodation</a></li>
                    <li><a href="otherthings.html">FAOs </a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                            </ul>
                    <div style="clear: both;"></div>
            </div>  
            </header>       

        </div>

    </body>
</html>

/*********************************************
          General
 **********************************************/
body {
    background-color: #66CCFF;
    background-image: url(image/map_1.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    background-color:#DCDCDC;
}


a {
    text-decoration: none;
}

div {
margin: 0 auto;
padding: 0;
}

/*********************************************
                  heading
 **********************************************/


#logo {
    display: block;
    height: 20px;
    float: left;
    }       

#logo img {
    width: 200px;
    margin-left: 100px;
    margin-top: 5px;
}

#logo img:hover {
    opacity: 0.3; 
    filter: alpha(opacity=30);
    }

.container {
    padding: 5px 0;
    width: 100%;
    text-align:center; 
    height: 50px;
    background-color: #99CCCC;

}   

.nav {
    text-align: center; 
}   


ul li {
    width: 150px;
    list-style: none;
    display: inline-block;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}

ul li:last-child {
    margin-right: 5px;  
}

li a {
    color: #b6fcd5;
    line-height: 30px;
    display:block; 
    }

li a:hover {
    color: #0CC;
    }

li a:visited {
    color: white;
    }

1 Answer

Zhihao Wang
Zhihao Wang
9,687 Points

Hello Elsa,

Try including your logo in your ul, this will help alot with the positioning. Here's what the HTML will look like:

  <ul class="nav">

          <div id="logo">
                 <a href="index.html"><img src="image/logo.png"></a>
          </div> 
          <li><a href="theday.html">Wedding Day</a></li>
          <li><a href="reception.html">Reception</a></li>
          <li><a href="accommodation.html">Accommodation</a></li>
          <li><a href="otherthings.html">FAOs </a></li>
          <li><a href="gallery.html">Gallery</a></li>
</ul>

Here's what the css might look like:

#logo {
    display: block;
    height: 20px;
    margin-right: (insert how much space you want between logo and your list items);
    margin-left: 100px;
    margin-top: 5px;
    };

#logo:hover {
    opacity: 0.3; 
    filter: alpha(opacity=30);
    }

I'm not going to write all of your code, but you get the idea, comment if you still have any problems!

Cheers!