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
Aurelian Spodarec
10,801 PointsMaking Navigation with CSS!
Hi!
How can I make navigation like this?
I have tried few HTML makrups, but the one I did wasn't the best.
Now I came with other one
<!-- HEADER
================================================== -->
<header class="header">
<div class="container">
<nav class="header__nav">
<div class="header__navigation">
<div class="header__logo">
<h1 class="header__text">New News</h1>
</div>
<div class="header__hamburger show--bw-md">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<ul class="nav-block">
<li class="nav-block__item--active"> <!-- active -->
<a class="nav-block__link" href="">
<i class="fa fa-home nav-block__icon" aria-hidden="true"></i>
Home
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-newspaper-o nav-block__icon" aria-hidden="true"></i>
News
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-thumbs-o-up nav-block__icon" aria-hidden="true"></i>
Services
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-star-o nav-block__icon" aria-hidden="true"></i>
About
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-clone nav-block__icon" aria-hidden="true"></i>
Works
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-users nav-block__icon" aria-hidden="true"></i>
Team
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-envelope-o nav-block__icon" aria-hidden="true"></i>
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- HEADER
================================================== -->
<header class="header">
<div class="container">
<div class="header__logo">
<h1 class="header__text">New News</h1>
</div>
<div class="header__hamburger show--bw-md">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<nav class="header__nav">
<ul class="nav-block">
<li class="nav-block__item--active"> <!-- active -->
<a class="nav-block__link" href="">
<i class="fa fa-home nav-block__icon" aria-hidden="true"></i>
Home
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-newspaper-o nav-block__icon" aria-hidden="true"></i>
News
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-thumbs-o-up nav-block__icon" aria-hidden="true"></i>
Services
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-star-o nav-block__icon" aria-hidden="true"></i>
About
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-clone nav-block__icon" aria-hidden="true"></i>
Works
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-users nav-block__icon" aria-hidden="true"></i>
Team
</a>
</li>
<li class="nav-block__item">
<a class="nav-block__link" href="">
<i class="fa fa-envelope-o nav-block__icon" aria-hidden="true"></i>
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
Which or how would you organize your HTML?
Look at the site on mobile, and desktop, what is your markup plan for it? I know how to code it with CSS, I'm jsut askin about HTML markup to have the best structure.
The naming conventions needs to be good, because if not, I would do it my messy way.
Aurelian Spodarec
10,801 PointsOh, thank you, but my question wasn't about that :D but about HTML structure.
So how woudl you code that strucutre i just showed you?
So I mean, you can either write a div that's named <div class="hamburgerMenuToogleMobile"></div> which isn't the best
or <div class="header__hamburger--toggle"></div> which is better, that's what i mean.
But what I'm trying to do, not use JS or CSS, but just plain HTML, so when I add CSS , everything will click, so I was wondeirng how shoudl i organize the HTML and naming conventions, since the last one I did, I was missing soemthing and it wasn't the best : p but thank you
1 Answer
Jennifer Nordell
Treehouse TeacherHi there Mr Bond 007! To be fair, I feel like Garrett Sanderson did a great job of answering your question. In fact, the title of this post is how to make a navigation and does not suggest anything about HTML markup and naming conventions until you get to the next line.
That being said, I don't find anything really wrong with your HTML. I might have done some of the indentation differently to indicate items that are inside of other items. But this is my personal preference. I feel like it's less important that your naming of the classes are "perfect" than it is that they are clearly readable and understandable by others reading your code. But it seems to me that you did a very nice job already in this regard.
Keep in mind that naming conventions are a guideline and it could be very well that you end up on a team where they employ different variations on a convention. So making it "perfect" might not be the best use of your time as you might have to realign those conventions with what is desired and expected by the group you're working with.
Good luck!
Aurelian Spodarec
10,801 PointsThank you for your answer, good to know! What happen before is that, i actually go the CSS wrong, and missed one DIV and i kinda messed it up.
Now heres github repository didn't put it on gh-pages yet, but this works perfectly fine. I did 100% better than the first time i did it, and this is my 3rd time doing this. I have learned a lot lol a lot.
Oh yes, you are totally right, but when we talk about BEM for example, many people use it different, but the logic of it it's still the same. Following the pattern I code, the naming shoudl be perfect, as well as using SMACSS, OOCSS and such, shoudl be used, and states too, of course depends, but that's what im doing now. Also, the naming conventions are pretty hard to name if you are a beginner, because you have no idea what is banner, hero, region section etc.. with experience and such, this comes easier, and it did became easier for me. When i used BEM and other suff like OOCSS, my project became 100% cleaner and more maintanable, beautiful code etc.. and so now I'm trying to write beautiful code.
There is a difference between poor CSS, good CSS and Master CSS. If you get me. I think Im moving from poor to good , somewher in the middle of that.
btw the post is in HTML and I said how to make a navigation like in the link. I didn't mention anything about JS on how I can make a feature that changes the background color on the section : p And there are only 3 lines or so when you read, so I don't know how people can misunderstand this : p
:D I hope you get me, and thank you :D
thats what i got now
the missing div was header__home
<!-- HEADER
================================================== -->
<header class="header">
<div class="container">
<div class="header__inner">
<div class="header__home">
<div class="header__logo">New News</div>
<div class="header__hamburger show--bw-md">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div><!-- /header__home -->
<nav class="header__navbar">
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-home nav__icon" aria-hidden="true"></i>
Home
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-newspaper-o nav__icon" aria-hidden="true"></i>
News
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-thumbs-o-up nav__icon" aria-hidden="true"></i>
Services
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-star-o nav__icon" aria-hidden="true"></i>
About
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-clone nav__icon" aria-hidden="true"></i>
Works
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-users nav__icon" aria-hidden="true"></i>
Team
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">
<i class="fa fa-envelope nav__icon" aria-hidden="true"></i>
Contact
</a>
</li>
</ul>
</nav>
</div><!-- /header__inner -->
</div><!-- /container -->
</header>
changed it a bit, but this works just perfect, with the CSS using Sass it's evnn better :D I feel I'm going somewhere.
Garrett Sanderson
12,735 PointsGarrett Sanderson
12,735 PointsHi Mr, Bond.
What you are looking for is a javascript event to fire when the user scrolls on the page. From there you want to check to see where the user is on the page. You can check that using the scrolltop method.
You are going to want to also get where the position of each section on the page and compare that with what ever the value is of scrolltop and add an active class or remove an active class from your navbar links accordingly.
Here is a sample.