CODEWITHSUNDEEP
htmlcss
Stelle
Stelle

Reputation: 3

How to highlight active page on website with html and css

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 :)

Upvotes: 0

Views: 1707

Answers (5)

Hiranmay Mandal
Hiranmay Mandal

Reputation: 31

$(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

Upvotes: 0

Ravi Ubana
Ravi Ubana

Reputation: 395

You can do it simply 

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

}

Upvotes: 0

VISHAL SINGH
VISHAL SINGH

Reputation: 661

for active page add some css in your stylesheet like 

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

Upvotes: 1

Mike R.Bowen
Mike R.Bowen

Reputation: 7

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;
}

Upvotes: 1

cosmoonot
cosmoonot

Reputation: 2189

Update your css to reflect the correct classname. 

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

Upvotes: 0

Related Questions