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!

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

Andreas Ragnar Hansen
Andreas Ragnar Hansen
1,871 Points

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

Hi

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;
}
Ron McCranie
Ron McCranie
7,837 Points

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?

Andreas Ragnar Hansen
Andreas Ragnar Hansen
1,871 Points

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>
Jeff Lemay
Jeff Lemay
14,267 Points

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

Ron McCranie
Ron McCranie
7,837 Points

@jlemay would it be float left?

Jeff Lemay
Jeff Lemay
14,267 Points

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

Jeff Lemay
Jeff Lemay
14,267 Points

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.

Andreas Ragnar Hansen
Andreas Ragnar Hansen
1,871 Points

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

Andreas Ragnar Hansen
Andreas Ragnar Hansen
1,871 Points

Hi Ron

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

Ron McCranie
Ron McCranie
7,837 Points

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