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 Abe Layee
Abe Layee
8,378 Points

How do I put my logo on the left within my navigation menu?

I am trying to float my logo left and navigation to the right, but I want both logo and navigation should be on the same line. Logo left and nav right. I want to achieve something like this site navigation http://www.awwwards.com/

<body>
    <div class="header">
        <div class="logo">
            <a href="#">Logo here</a>
        </div>
        <div class="main-nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">About</a></li>
            </ul>
        </div>
    </div>
</body>

*navigation*/
.main-nav ul  {
    background:black;
    width:100%;
}

.main-nav ul li{
     display:inline-block;
     text-align: center;
     margin-left:15px;


}


.main-nav ul {
     float:right;
     background:#3498db;
     text-align:right;
     height:40px;

}



/*logo*/

.log{
    float:left;
}

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Abe,

Here's a quick little something I put together that pretty much gives that effect. I made the unordered list display inline and added a vertical-align to the logo of middle so that the ul matches with the logo. Display each list item as inline and play around with margins and padding for the list items.

http://codepen.io/anon/pen/VLmxQP

Jerome Heaven
Jerome Heaven
8,641 Points
Jerome Heaven
Jerome Heaven
8,641 Points

God bless you Marcus! Changing the game ?