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

jose macedo
jose macedo
6,041 Points
Posted by jose macedo
jose macedo
6,041 Points

i cant put my navigation in my header i want it even on top and bottom

here is my code https://w.trhou.se/04w9wpwimh

2 Answers

Robert Lyon
Robert Lyon
7,551 Points
Robert Lyon
Robert Lyon
7,551 Points

Hi not entirely sure what it is you are looking for but i had a little mess around with your code and changed a few things to get the nav bar into you header.

This is the css i altered.

/***body**/
body {
  margin: 0 auto;

}
/***header**/
header {
  float: left;
  display: inline-block;
  width: 100%;
  background: black;
  color: white;
  position: relative;
}



.logo {
  display: inline-block;
  padding-left: 1%;
}

/***navigation**/
nav {
  float: right;
  margin: 0 5% 0 0;

  position: absolute;
  top: 64px;
  right: 0;
}

nav ul {

  list-style: none;

}

 nav li {
  display: inline;
  font-size: 22px;

}

nav a {
  font-weight: 800;
  text-decoration: none;
}

The main changes that i made were floating the elements, changing the display type on the logo and using an absolute position to get the nav bar into position.

I hope this can help you go in the direction you want to but please keep in mind that i am just a novice myself and my code may not be the best answer to the problem

jose macedo
jose macedo
6,041 Points
jose macedo
jose macedo
6,041 Points

thanks but why do you float the header left? and so i had to add a position property?

Robert Lyon
Robert Lyon
7,551 Points
Robert Lyon
Robert Lyon
7,551 Points

No problem, the float left in the header can be removed, i must of added it when i was trying something out. Just disregard it. I'm sure there is other ways to position your nav element within your header and probably much simpler ways but this was just the way that i thought to do it. A good thing to do might be to find nav bars on other websites and have a look at the techniques that were used for that site.