Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

jose macedo
jose macedo
6,041 Points

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

2 Answers

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

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

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.