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
Rob Cachia
6,494 PointsNavigation ā adding a bullet to the selected list item within a navigation menu
Wonder if anyone can suggest the best way to add a bullet to the left side of a selected list item in a navigation menu. I have a four page menu (as below example), each name is in a different colour. To highlight what page I am on, I would like a simple bullet in the same colour to the left of that selected list item. Also, when hovering over the other three lists in the nav menu, I would like a bullet in their colour to appear, and then the selected page to then have just that bullet next to it in its colour. Two step example of menu structure below: ā¢ About Network News Contact
About ā¢ Network News Contact
I have based the navigation code on the tutorial: Web Design - How To Make A Website. The main difference here to what exists in the tutorial, is that all four of the links in my nav are in a different colour, and I would like a bullet to appear in the same colour but only to the 'selected' link. Also when hovering over the other links, for a bullet to appear in the correct colour next to its link on hover.
I can get the each of the nav links to appear in a different colour, and I have applied a simple bold weight to 'selected' links and for links to change to bold on hover. The problem I am having is trying to get the list-style-type: circle property to switch on a bullet in the correct colour next to the selected link and on hover. I have tried to include the li selector within css code below, but it doesn't seem to work. Or I can get it to add a bullet by playing around with different selectors, but not apply the correct colour to its link. I have included the code for just the first two nav items below. Any ideas would be much appreciated, thanks Rob
html - Index Page
<ul>
<li><a href="index.html" class="index index-selected">about</a></li>
<li><a href="network.html" class="network">network</a></li>
<li><a href="news.html" class="news-hover">news</a></li>
<li><a href="contact.html" class="contact">contact</a></li>
</ul>
html - Network Page
<ul>
<li><a href="index.html" class="index">about</a></li>
<li><a href="network.html" class="network network-selected">network</a></li>
<li><a href="news.html" class="news">news</a></li>
<li><a href="contact.html" class="contact">contact</a></li>
</ul>
.index-selected, .index:hover {
list-style-type: circle;
font-weight: 700;
color: #333092;
}
.network-selected, .network:hover {
list-style-type: circle;
font-weight: 700;
color: #BF301A;
}
```
2 Answers
Chris Dziewa
17,781 Points.index {
color: limegreen;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
li {
position: relative;
}
.index::before {
content: "\2022";
color: inherit;
padding-right: 4px;
position: relative;
top: 1px;
}
Try using pseudo elements (generated content) with ::before on the element. The \2022 is a hexcode for the bullet point. The content property is object being added You can usually find symbol numbers with a google search for an html entity. I set the text decoration as none on all links to remove the underline, and on the before pseudo selector, I set the color to inherit. In this case, the color on .index is set to limegreen, so it inherits this color for the bullet point. I then removed the list style from unordered lists and set the li to be positioned relative as well as the anchor with the index class. Once positioning is set, you can use top, right, etc properties for the element to move it relative to its current position. Then just add padding and it looks like a regular bullet point. You can replace the bullet point with any other html symbol. If you ever need to use this for content that is two lines long or more, you'll want to also set a text-indent property so that the text doesn't wrap underneath the bullet point.
Rob Cachia
6,494 PointsPerfect, thanks so much for your help!
Chris Dziewa
17,781 PointsAnytime Rob, glad I could help!
Rob Cachia
6,494 PointsRob Cachia
6,494 PointsThanks for your reply Chris. I have applied the before pseudo element to each of the selected page links ā so now a single bullet is only applied to the page that I'm on and in correct colour, so this is great thanks. The only issue now however, is that my four page menu links are ranged left, each on a single line under each other. So when a bullet is applied to the active page, it pushes that selected link to the right and is no longer aligned flush left with the other links. I have tried applying a right position property to the element, which helps to position it away from the ranged left alignment of the four links, but it still pushes the selected link over, making it out of alignment with the other three links. Any ideas how to resolve?
Many thanks, Rob
Chris Dziewa
17,781 PointsChris Dziewa
17,781 PointsIn this case you are going to want to use
absolutepositioning. This will remove the element from the normal document flow which is currently pushing the text over. By default when you set an element's position to absolute, it is then positioned according to the browser window and not the containing element. We don't want that to happen so we have to set the position of the element we would like to position around torelativepositioning. This tells the browser that any element contained within another element (In this case, the pseudo-element) should be positioned with relation to the containing element if it is relatively or absolutely positioned. You will want to add the.indexdeclaration as well as change the pseudo-element to be somewhat like the following-changed to your needs.