Highlight active menu item with CSS only

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">
      <a href="#" class="nav-link"><span>Home</span></a>
    </li>
    <li class="nav-item ">
      <a href="#" class="nav-link"><span>Media</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
        </ul>
      </nav>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Search</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Report</span></a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link"><span>More</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
          <li class="submenu-item">
            <hr class="submenu-seperator" />
          </li>
          <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></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

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>

Answer 2

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">
  <a href="#" class="nav-link is-active"><span>Home</span></a>
</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">
      <a href="#" class="nav-link is-active"><span>Home</span></a>
    </li>
    <li class="nav-item ">
      <a href="#" class="nav-link"><span>Media</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
        </ul>
      </nav>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Search</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Report</span></a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link"><span>More</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
          <li class="submenu-item">
            <hr class="submenu-seperator" />
          </li>
          <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
        </ul>
      </nav>
    </li>
  </ul>
</nav>


<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>