CODEWITHSUNDEEP
javascripthtmlcss
Kamal Chhirang
Kamal Chhirang

Reputation: 500

How to change active link color in navigation bar

Just like this http://www.w3schools.com/html/default.asp "HTML HOME" button color is green because that's the active link.

So how to do the same on my website?

My HTML code: 

<!-- Website fixed header-->   
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html" style="text-decoration:none"><div class="hoverwebsite">Website Name</div></a></button>    
<div class="dropdown-content website" style="left:0;">
</div>
</div>

My CSS:

    /* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;


}


/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;


}

.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;

}

.dropdown-content.website {
   display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}

.dropdown.website:hover .dropdown-content {
 display: block;

 }

.dropdown.website:hover .dropbtn.website {
 background-color: #4CAF50;

 }

.hoverwebsite {
color: #f2f2f2;
font-weight:bold;

}
a:active {
background-color: yellow;
}


</style>

Here is my JSFiddle. Let me know if you need more details.

Upvotes: 1

Views: 1524

Answers (1)

Pushpendra
Pushpendra

Reputation: 1712

Add class="active" in the anchor tag which you want to keep active

div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;


}


/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;

}

.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;

}

.dropdown-content.website {
   display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}

.dropdown.website:hover .dropdown-content {
 display: block;

 }

.dropdown.website:hover .dropbtn.website {
 background-color: #4CAF50;
height:38px;
 }

.hoverwebsite {
color: #f2f2f2;
font-weight:bold;

}

a{
  height:38px;
display:block;
padding-top:16px;}

a.active {
background-color: #4CAF50;
color: #f2f2f2;
}
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html"  style="text-decoration:none" id="website" >Website Name</a> <a href="file:///C:/Users/Kamal/Desktop/New%20folder%20(2)/Homepage.html"  style="text-decoration:none" id="website2">Website Name</a></button>    
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>

EDIT 1: Have this js code in the page where you want anchor tag to remain active. I have removed active class from anchor tag in html code. Have script reference to jquery library too.

JS:

$(document).ready(function() {
 $('#website').addClass('active');
});

EDIT 2: You possibly can't deal with margins in button, make button position absolute instead of fixed and align them using top, left, right, bottom css properties

.dropbtn.website {
    top:0px;
    background-color: #000000;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    left: 0px;
    padding:0px;
    position:absolute;
    left:10px;
    width:150px;
    }

   .dropdown.website {
      Top:43px;
      position: fixed;
      display: inline-block;
      margin-right:10px;
     }

Codepen Use this css to see how it can be aligned.

EDIT 3:

Use this in your index file 

<script>
 $(document).ready(function() {
 $('#website').addClass('active');
 if($('#website2').hasClass('active'))
   $('#website2').removeClass('active');
 }); 
 </script>

and this script in your yooo.html file

<script>
 $(document).ready(function() {
 if($('#website').hasClass('active'))
   $('#website').removeClass('active');
 $('#website2').addClass('active');
 }); 
 </script>

Also check the updated html i have changed the id of second anchor tag to website2

Upvotes: 1

Related Questions