Highlight active menu item with CSS only - html

Question

I have a topnav menu that works fine, I just want to keep the underline that appears on the hover event to stay there if that menu item is active. I have tried many solutions I found on the forum, but somehow none did not work. Any help is appreciated.
and here are the html and css snippets:
body {
margin: auto;
}
.topnavbar {
background-color: rgba(20, 180, 255, 1);
/*rgba(0,255,150,0.6); #3EDC99*/
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
.nav {
padding: 5px 5px 5px 5px;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: rgba(245, 245, 245, 1)/*#3498db; */
}
.nav {
width: 550px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Verdana, Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
/* color of menu links
span {
color:yellow;
}
*/
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
color: blue;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: blue;
/*small triangle showing drop down menu*/
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: blue;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: blue;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
.submenu-link {
color: red;
}
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item ">
<span>Media</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="nav-item">
<span>Search</span>
</li>
<li class="nav-item">
<span>Report</span>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item">
<hr class="submenu-seperator" />
</li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
</ul>
</nav>
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
I use js to open the drop down menu items, but I don't think it was necessary to make the post more extended than it is now.

Answer 1

You can create a new class e.g. .is-active. On the home page you can add this class to the home link in your navigation, like this:
<li class="nav-item">
<span>Home</span>
</li>
In your CSS you style the is-active class the same way as the :hover.
On each new page of your site, in the HTML, change the location of the .is-active class to the appropriate page. If your website is much bigger or more complicated, you can do this programmatically instead.
Basic example:
body {
margin: auto;
}
.topnavbar {
background-color: rgba(20, 180, 255, 1);
/*rgba(0,255,150,0.6); #3EDC99*/
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
.nav {
padding: 5px 5px 5px 5px;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: rgba(245, 245, 245, 1)/*#3498db; */
}
.nav {
width: 550px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Verdana, Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
/* color of menu links
span {
color:yellow;
}
*/
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
color: blue;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:focus::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: blue;
/*small triangle showing drop down menu*/
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: blue;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: blue;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
.submenu-link {
color: red;
}
.nav-link.is-active::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item ">
<span>Media</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="nav-item">
<span>Search</span>
</li>
<li class="nav-item">
<span>Report</span>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item">
<hr class="submenu-seperator" />
</li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
</ul>
</nav>
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>

Answer 2

For as far as I'm concerned, what you are trying to achieve is possible with JS or adding a class to the element. But since you want only CSS, I don't think that's possible.
For if you changed your mind, this is how to do it with adding a class: How to give a different color to the current selected list item than other items in html?
For JavaScript/jQuery, I guess you could just add this:
<script>
$('.nav-items li a').click(function(event){
event.preventDefault();
$('.nav-items li a').removeClass('active')
$(this).addClass('active');
});
</script>
EDIT: This is more like what you need:
<script>
var page = window.location.pathname;
var elements = document.getElementsByClassname("nav-link");
if (page == "/index/"){
elements[0].style.textDecoration="underline";
}
</script>