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 Aaron Gill-Braun
Aaron Gill-Braun
180 Points

Need Help with CSS Navbar!

Hi there, I need to make this navbar in html and css. I have designed it in photoshop and it looks like this: http://postimg.org/image/cxqp9jl4r/ How do I turn this into a navbar. All the tutorials are for block based ones, whereas this is odd shapped.

2 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Aaron,

I have put this together using flexbox here, be sure to look at the complied CSS for prefixed version to copy :)

Hope this helps

Craig

John Norris
John Norris
22,455 Points

That's a way better solution! lol

Aaron Gill-Braun
Aaron Gill-Braun
180 Points

yeah looks great!!!

Craig Watson
Craig Watson
27,930 Points

Thanks Guys!

Glad I could help out :)

It would be worth adding ID's to nav and ul, then being more specific with css selectors but the idea is there.

Craig

John Norris
John Norris
22,455 Points
John Norris
John Norris
22,455 Points

I think this will achieve what you're looking for

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>

  <div class="container">
    <nav>      
        <ul>
          <li>------------------------------</li> <!-- <li><img src="#" alt="line" /></li> -->
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li>------------------------------</li> <!-- <li><img src="#" alt="line" /></li>  Instead of text, you can create and use an image-->
        </ul>
        <hr />
    </nav>
  </div>

</body>
</html>

.container {
  width: 100%;
  text-align: center;
}
ul li {
  display: inline;
  padding: 40px;
}
ul li a {
  color: #000;
  font-family: Verdana, Geneva, sans-serif;
  text-decoration: none;
  font-size: 1.2em;
}
Aaron Gill-Braun
Aaron Gill-Braun
180 Points

Thanks but how could i replace the dashes with the solid line?

Aaron Gill-Braun
Aaron Gill-Braun
180 Points

nevermind got it.

John Norris
John Norris
22,455 Points

Sweet!. Glad to help! Reply if you have any more questions!

Aaron Gill-Braun
Aaron Gill-Braun
180 Points

yeah when i added my line image, i pushes up wards above the text, do i add top padding?