HTML include menu - current page css - html

Question

I have to include an HTML menu.
I need to edit the active page from the css menu.
include menu:
<div w3-include-html="inc/header.html"></div>
/*CSS example - but not working:*/
.main-menu a.active {
color: #0061bb;
}
<div class="mnmenu-sec">
<div class="container">
<div class="row">
<div class="col-md-12 nav-menu">
<div class="col-md-3">
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
</div>
<div class="col-md-9">
<div class="menu">
<nav id="main-menu" class="main-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
I need to highlight an active page from the menu, such as changing the font color.
Can you tell me how I could do it?

Answer 1

.main-menu a {
color: #000;
transition: 0.3s;
}
.main-menu a:hover {
color: #0061bb;
}
<div class="mnmenu-sec">
<div class="container">
<div class="row">
<div class="col-md-12 nav-menu">
<div class="col-md-3">
<div class="logo">
<img src="img/logo.png" alt=""/>
</div>
</div>
<div class="col-md-9">
<div class="menu">
<nav id="main-menu" class="main-menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

:active = when a link it is being clicked.
:hover = when the mouse cursor is over the link
If you want the :active then this css should do it:
#main-menu a:active {
color: #0061bb;
}
If you wanna color the link you currently are, than you need JavaScript to add a class like class="currentLink" then add css to it
.currentLink {
color: #0061bb;
}