How to highlight active page on website with html and css

Question

I'm very new to code (started last month) and I've been trying to highlight the link to the active page on my website. I've used several different methods and can't find out whats wrong. Any help would be appreciated.

<nav>
  <ul> 
    <li><a href="index.html" class="active-page">Home</a>
    <li><a href="page1.html"> History</a></li>
    <li><a href="page2.html"> Ownership</a></li>
    <li><a href="page3.html"> Purchase</a></li>
  </ul>
</nav>

This is the HTML for the nav bar first page of my website

Header{
    Background-color:#0D2831;
    Color:  #35d6c6;
    padding-top:20px;
    padding-bottom:30px;
    Min-Height:90px;
    border-bottom :#5292A7;
    font-family:font-family:'Open Sans', sans-serif;
    Text-transform:Uppercase;
    min-height:180px;
}

Header a{
    text-decoration:None;
    Text-transform:None;
    font-size:20px;
    color:#35d6c6;
}

Header ul{
    margin:0;
    padding:0;
}

Header li{
    display:inline;
    padding: 0 20px 0 20px;
}

Header #logo{
    float:left;
}

Header #logo h1{
    margin:0;
}

header nav{
    float: right;
    padding-bottom:30px;
}

Header .hilight, a{
    color:  #FFFFFF;
}

Header a:hover{
    color:#FFFFFF;
    font-weight:bold;
}

header nav .activepage{
    Background-color:white;
}

This is the CSS for the entire header which contains the navigation.

If anybody would be able to tell me what I am either missing or doing wrong that is preventing the active page from highlighting any help would be appreciated :)

sravs · Accepted Answer · 2017-04-05 06:17:00Z

1

for active page add some css in your stylesheet like

.active-page{
   background-color:red;
   border-bottom:1px solid white;
}

edited Apr 5, 2017 at 6:17

sravs

3302 silver badges14 bronze badges

answered Apr 5, 2017 at 6:10

VISHAL SINGH

6611 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike R.Bowen · Accepted Answer · 2017-04-05 06:02:26Z

1

I see one wrong text so you can try change it as below: Before :

header nav .activepage{
    Background-color:white;
}

After:

header nav .active-page{
    Background-color:white;
}

answered Apr 5, 2017 at 6:02

Mike R.Bowen

74 bronze badges

Comments

cosmoonot · Accepted Answer · 2017-04-05 06:02:17Z

0

Update your css to reflect the correct classname.

header nav .active-page {
    background-color:white;
}

answered Apr 5, 2017 at 6:02

cosmoonot

2,1973 gold badges32 silver badges38 bronze badges

Comments

Ravi Ubana · Accepted Answer · 2017-04-05 06:18:29Z

0

You can do it simply

nav .active-page {
Background-color:white;

}

answered Apr 5, 2017 at 6:18

Ravi Ubana

3936 silver badges26 bronze badges

Comments

Lee Taylor · Accepted Answer · 2022-06-24 14:46:35Z

0

$(document).ready(function(){
    $('nav ul li a').click(function(){
        $("ul li a").removeClass(".active-page");
        $(this).addClass(".active-page");
    });
});

You can now add js also

edited Jun 24, 2022 at 14:46

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jun 24, 2022 at 4:38

Hiranmay Mandal

315 bronze badges

1 Comment

Ethan Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to highlight active page on website with html and css

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related