Css: How to Change Colour of Active Navigation Page Menu

CSS: How to change colour of active navigation page menu

I think you are getting confused about what the a:active CSS selector does. This will only change the colour of your link when you click it (and only for the duration of the click i.e. how long your mouse button stays down). What you need to do is introduce a new class e.g. .selected into your CSS and when you select a link, update the selected menu item with new class e.g.

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

You will need to update your template page to take in a selectedPage parameter.

How can I change the color of this active nav-tab?

This code will solve your problem.

.nav-item {    color: black;    background-color: white;    text-decoration:none;    font-weight: bold;}a.nav-item.nav-link.active {    color: white;    background-color: #f90;    text-decoration:none;    font-weight: bold;}

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></head><body> <div class="container" align="center"><nav class="nav nav-pills nav-justified" role="tablist">        <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>        <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a></nav>    </div></body></html>

CSS to change set background of active nav menu page

No need to add background or anything to your code.

li.current-menu-item a,
nav a:active,
nav a:focus {
  color: #406639 !important;
}
li.current-menu-item a:before,
nav a:active:before,
nav a:focus:before {
    transform: scaleX(1);
}

This would trigger default style that you have for hover state.

EDIT:
I have updated Answer with full thing that you need. :)
Note that I had to add Important as you have important on this selector:

a:focus {
 color: #c9c9c9 !important;
 text-decoration: none;
}

Changing The Color of Active Navigation Bar

If you want to keep the state of the active item then you need to include the navbar layout in every html file. For example if you click on Research then in the research.html your navbar must be

<div class="navbar">
<div class="navbar-fixed-top">
  <div class="container" style="width: auto;">
      <div class="nav-collapse" id="nav-collapse">
      <ul class="nav" id="nav">
        <li ><a href="#skdill" >skisll</a></li>
        <li ><a href="#skill">skill</a></li>
        <li class="active"><a href="#research">research</a></li>
        <li ><a href="#">Link</a></li>
                 </ul>
    </div>
  </div>
</div>

And so on for all your links.

EDIT
You can use JavaScript and do the trick:

<!DOCTYPE html>
<html>
   <head>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
     </style>
  </head>

  <script>
     $(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });
  </script>

  <body>
     <div class="navbar">
        <div class="navbar-fixed-top">
           <div class="container" style="width: auto;">
              <div class="nav-collapse" id="nav-collapse">
                 <ul class="nav" id="nav">
                     <li id="home"><a href="#home">Home</a></li>
                     <li id="skill"><a href="#skill">Skill</a></li>
                     <li id="research"><a href="#research">Research</a></li>
                     <li id="link"><a href="#link">Link</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>

Demo:
http://jsfiddle.net/Ag47D/3/

How to change color of current page of navigation bar

The key is to do this on page load NOT on click.

Simply loop through your navigation and see if the HREF matches the current URL.

<script>
    let current_url = document.location;
    document.querySelectorAll(".navbar .btn").forEach(function(e){
       if(e.href == current_url){
          e.classList += " current";
       }
    });
</script>

Css: How to Change Colour of Active Navigation Page Menu