How to change active link color in navigation bar


Tags: javascript,html,css

Problem :

Edit:1 I want Green color of the button not the text only.

Note: Their are a lot of similar questions and i seen them all. But my problem is not solved. So i decided to make a question about it.

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

So how to do the same in 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>

https://jsfiddle.net/sarowerj/cyu0u9rk/1/



Solution :

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


    CSS Howto..

    How to change CSS of last tab in Bootstrap Tab

    How to make hover using jquery without CSS?

    How to make the margins and border in a mobile website invisible html/css

    Learn how to arrange elements correctly using CSS [closed]

    How determine what CSS selector to use from my HTML source code?

    How to style div's so that they don't stack right on top of each other?

    How to center element in css?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to play specific keyframes with css animation

    website div won't stretch from left to right, how do you fix css?

    How To Adjust CSS List On Hover Image

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

    How to create a responsive design with CSS only

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    how to prevent link padding during hover from extending paragraph padding

    How to make a div update the content with a sliding effect (animation similar to flash)?

    How do I add a Css file to my Class library?

    How to remove this head css styling with javascript?

    How to align a Wordpress navigation bar to the right of a logo?

    How to center-zoom with responsive images without affecting the image size?

    CSS - how to make content fit to the width/height of paragraph?

    how to make css nested colors in one div bacground

    How to style parent li elements of headers using CSS?

    How to create hidden pop out side menu

    how to link css files in organization github pages

    How to reference CSS file in a javascript only class

    How to set image height 90 % of whole page height (not viewport)

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to fade CSS sprite images using CSS background-position with jQuery?