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

Posted May 18, 2015 7:37pm by

How to move the navigation to the top-left side of the header

How do I move the navigation to the top-left of my header.

/********************************
GENERAL CSS Application
********************************/

body {
  font-family: 'Duru+Sans' , sans-serif;
}


#wrapper{
 max-width: 940px;
 margin: 0 auto;
 padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/********************************
HEADING
********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin 0;
}

h1 {
  font-family: 'Duru+Sans', sans-serif;
  margin: 70px 0;
  font-size: 2.5em;
  font-weight:normal;
  line-height: 0.8em;
}

h2 {
  font-size: 1.8em;
  margin: -5px 0 0;
  font-weight: normal;
}


/********************************
Navigation
********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
 list-style: none;
 margin: 0 10px;
 padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 200;
  padding: 15px 10px;
}


/********************************
Footer
********************************/


footer {
  font-size: 1.0em;
  text-align: center;
  clear: both; 
  padding-top: 50px;
  color: #ccc;

}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}







/********************************
Page: Portfolio
********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
 margin: 0;
 padding: 5%;
 font-size: 1.0em;
 color: #bdc3c7
}

/********************************
Page: About
********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 25%;
}

/********************************
Page: Contact
********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png')
}

.contact-info li.mail a {
  background-image: url('../img/mail.png')
}

.contact-info li.Linkedin a {
  background-image: url('../img/linkedin_logo.jpg')
}




/********************************
COLORS
********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* blue header */
header {
  background: #257CA8;
  border-color: #257CA8;
}

/* grey footer */
footer {
  background: grey;
  border-color: grey;
}

/*green title */


/* navigation background on mobile divices */
nav {
  background: #0099CC;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: lightgrey;
}


/* navigation links */
nav a, nav a:visited {
  color: lightgrey;
}

/* selected nav link */
nav a, nav a:hover {
  color: #fff;
}

May 18, 2015 7:52pm

Being able to see the html that the css is controlling would help to provide a more accurate answer. Could you show that as well?

May 18, 2015 7:55pm

Hi Ron

Here is the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Andreas R. Hansen | Mechanical Engineer | CAD 'n CAE | Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Andreas R. Hansen</h1>
        <h2>Mechanical Engineer - CAD and Finite Element Analysis</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="community.html">Community</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/Design1.jpg">
              <img src="img/Design1.jpg" alt="">
              <p>Experimentation with texture and color.</p>
            </a>
          </li>
          <li>
            <a href="img/Design2.jpg">
              <img src="img/Design2.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/Design4.jpg">
              <img src="img/Design4.jpg" alt="">
              <p>Dripes created using photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/Design5.jpg">
              <img src="img/Design5.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
            <li>
            <a href="img/Design6.jpg">
              <img src="img/Design6.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
           <li>
            <a href="img/Design7.jpg">
              <img src="img/Design7.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
           <li>
            <a href="img/Design8.jpg">
              <img src="img/Design8.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
             <li>
            <a href="img/Design9.jpg">
              <img src="img/Design9.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
             <li>
            <a href="img/Design11.jpg">
              <img src="img/Design11.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        <a href="http://facebook.com/andreas.hansen.359"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
              <a href="https://www.linkedin.com/hp/?dnr=sbYIr51Kbp983YEmpb1yPKoBfp9PMoLgOFFU"><img src="img/linkedin_logo11.jpg" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Andreas Hansen.</p>
      </footer>
    </div>
    </body>
</html>

May 18, 2015 7:57pm

Without adjusting your html, you could float the #logo right.

May 18, 2015 8:02pm

@jlemay would it be float left?

May 18, 2015 8:11pm

If Andreas wants the nav menu to be in the upper left, floating the logo right will push the nav menu left.

Or he could use float:left for the nav element.

Or he could put float:left on the nav and float:right on the logo, but no code is better than no code.

Should achieve the same result whichever route he takes.

3 Answers

May 18, 2015 8:09pm

Maybe something like this?

nav in top left of header

May 18, 2015 8:16pm

Apparently I needed to look closer at the code snippets provided. I thought you had a logo on the left and nav on the right and were trying to swap them around. If this is what you are trying to achieve, I would move my nav element above the #logo in my html. That way you don't need to use absolute positioning.

May 18, 2015 8:09pm

Well I have put the #logo right and left but nothing happens

May 18, 2015 8:11pm

Hi Ron

ja, that's the one. If you would be so kind and tell me what you just did.

May 20, 2015 5:57pm

I agree with Jeff that the best way (most responsive capable) is to adjust the html so that the nav is above the logo and you can use floats. To not change the html and provide a pure css solution I did this...

/********************************
GENERAL CSS Application
********************************/

body {
  font-family: 'Duru+Sans' , sans-serif;
}


#wrapper{
 max-width: 940px;
 margin: 0 auto;
 padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/********************************
HEADING
********************************/

header { // adjusted some stuff in here and added relative positioning.
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 20px;
  width: 100%;
  position: relative;
}

#logo {
  text-align: center;
  margin 0;
}

h1 {
  font-family: 'Duru+Sans', sans-serif;
  margin: 70px 0;
  font-size: 2.5em;
  font-weight:normal;
  line-height: 0.8em;
}

h2 {
  font-size: 1.8em;
  margin: -5px 0 0;
  font-weight: normal;
}


/********************************
Navigation
********************************/

nav {  // adjusted some stuff in here and added absolute positioning.
  text-align: left;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

nav ul {
 list-style: none;
 margin: 0 10px;
 padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 200;
  padding: 15px 10px;
}


/********************************
Footer
********************************/


footer {
  font-size: 1.0em;
  text-align: center;
  clear: both; 
  padding-top: 50px;
  color: #ccc;

}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}







/********************************
Page: Portfolio
********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
 margin: 0;
 padding: 5%;
 font-size: 1.0em;
 color: #bdc3c7
}

/********************************
Page: About
********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 25%;
}

/********************************
Page: Contact
********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png')
}

.contact-info li.mail a {
  background-image: url('../img/mail.png')
}

.contact-info li.Linkedin a {
  background-image: url('../img/linkedin_logo.jpg')
}




/********************************
COLORS
********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* blue header */
header {
  background: #257CA8;
  border-color: #257CA8;
}

/* grey footer */
footer {
  background: grey;
  border-color: grey;
}

/*green title */


/* navigation background on mobile divices */
nav {
  background: #0099CC;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: lightgrey;
}


/* navigation links */
nav a, nav a:visited {
  color: lightgrey;
}

/* selected nav link */
nav a, nav a:hover {
  color: #fff;
}

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Andreas Ragnar Hansen

Andreas Ragnar Hansen

How to move the navigation to the top-left side of the header

Ron McCranie

Ron McCranie

Andreas Ragnar Hansen

Andreas Ragnar Hansen

Jeff Lemay

Jeff Lemay

Ron McCranie

Ron McCranie

Jeff Lemay

Jeff Lemay

3 Answers

Ron McCranie

Ron McCranie

Jeff Lemay

Jeff Lemay

Andreas Ragnar Hansen

Andreas Ragnar Hansen

Andreas Ragnar Hansen

Andreas Ragnar Hansen

Ron McCranie

Ron McCranie