Navbar-i want to be colored when active

HTML & CSS
1

Hello,guys!I want to make the text of the navbar link another color when active,could you help me?

        <nav><ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="pagina2.html">YOUTH</a></li>
                <li><a href="#">APPLE</a></li>
                <li><a href="#">LEAVING APPLE</a></li>
                <li><a href="#">BACK TO APPLE</a></li>
                <li><a href="#">LEGACY</a></li>
        
         </nav></ul>  
        
    </header>
2

First, you give the appropriate link a class=“active” on each individual page.
Then you apply a style to .active in your css file.
That’s it.

1 Like
3

It does`n work,it just changes the color of the text even if the link is not active
html;

        <nav><ul>
                <li><a href="index.html" class="active">HOME</a></li>

css:
.mainheader nav ul li .active {
color: black;
}

4

By “active”, do you mean the moment at which the link is activated, or do you mean the link for the current page?

5

for example when i am on the home page i want the text to be another color,so you can see that you are on the homepage

6

Then as Dr_John said, the simplest way is to add a class to the appropriate link on each page, and apply styles to that. So on your “home” page, you add the class to the “home” link, on your “youth” page, you add it to the “youth” link, etc.

7

For example, see this site, and work through the menu, checking the source code each time.
http://manorgaragewantage.co.uk/index.htm
It uses current instead of active, but it’s just a name.

8

You might be able to use the “matching pairs” technique. A couple of old examples should help: :smile:

1 Like
9

I’ve used the above matching pairs method successfully when the menu was added by javascript, but I can’t remember who it was for so can’t point at a live page to view. you just have to remember to update the css file as well when adding a new page.

10

Off Topic Sort out the nesting of your elements, the closing </nav> tag should not be inside the <ul>.

11

If you are not using the active class elsewhere you would be better off just setting styles using

.active

rather than using all the preceding styles and tags as well.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.