HTML/CSS Navigation active state

65,949

You must add a class to the active navigation element and styled it.

HTML:

<ul id="Navigation">
    <li><a href="home.html">IC Home</a></li>
    <li><a href="forum.html" class="active">IC Forum</a></li>
    <li><a href="#contact.html">IC Contact</a></li>
</ul>

CSS:

ul#Navigation .active{
    border-color: white;
    border-left-color: black; 
    border-top-color: black;
    color: white; 
    background-color: #adadad;
}

So on forum.html the active class will be on the IC Forum link.

For the contact.html will be on the IC Contact and so on...

Share:
65,949
Admin
Author by

Admin

Updated on July 09, 2022

Comments

  • Admin
    Admin almost 2 years

    I'm new to HTML and CSS and I just finished implementing my Navigation Bar which works great so far. It is black and on hovering over the fields they turn grey.

    Now, I'm trying to implement that the field of the active page stays in that grey but it isn't working for me so far and I believe it's because of the HTML. On index.html nothing should be activated as I wont be using that page later. It's just the standard side. For Example then I have Home.html, Contact.html and Forum.hmtl.

    If I open Index.html in my browser and in my Navbar click on Home I will be navigated to the at the moment exact same page like Index.html, but on this page i want the home navfield to be highlighted. Do I have to (in the Home.html) state that this field is active? How do I do that.

    NAV: (in home.html currently the same as in index.html)

    <ul id="Navigation">
            <li><a href="home.html">IC Home</a></li>
            <li><a href="forum.html">IC Forum</a></li>
            <li><a href="#contact.html">IC Contact</a></li>
        </ul>
    

    Do I have to put something which states that <li><a href="home.html">IC HOME</a></li> is active?

    This is how I did the hover effect in my css file:

    ul#Navigation a:hover, ul#Navigation span 
    {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: #adadad;
    }
    

    and I thought i could just do the same for active:

    ul#Navigation a:active, ul#Navigation span 
    {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #adadad;
    }
    

    I'd really appreciate some help as I'm still new to this.