Menu icon Foundation
Problem with is-active

I have a top-bar navigation menu on my site that has several dropdown menus.. I have always used class="active" to highlight the active element and that has worked fine up through the present version 6.5.3. In reading the docs I noticed that is-active has now replaced active. I tried replacing active with is-active and I didn't get the desired highlighting. On inspecting the active item on the top-bar I found that the background color on the active item was specified by the css

.menu .active > a {background-color: #1779ba;}

when active was used, but was specified by

.dropdown.menu > li.is-active > a {background-color: transparent;}

when is-active was used. I can get the desired highlighting on the active item using is-active by changing the variable $dropdown-menu-item-background-active in _settings.scss from transparent to get-color(primary). However, this also applies this background to any other dropdown menu item I hover over. Has anyone else experienced this behavior? I can still get the desired active higlighting using the active class as long as it remains supported, but I would like to be able use the recommended is-active class. Any suggestions would be appreciated.

activeis-activedropdownmenu

I have a top-bar navigation menu on my site that has several dropdown menus.. I have always used class="active" to highlight the active element and that has worked fine up through the present version 6.5.3. In reading the docs I noticed that is-active has now replaced active. I tried replacing active with is-active and I didn't get the desired highlighting. On inspecting the active item on the top-bar I found that the background color on the active item was specified by the css

.menu .active > a {background-color: #1779ba;}

when active was used, but was specified by

.dropdown.menu > li.is-active > a {background-color: transparent;}

when is-active was used. I can get the desired highlighting on the active item using is-active by changing the variable $dropdown-menu-item-background-active in _settings.scss from transparent to get-color(primary). However, this also applies this background to any other dropdown menu item I hover over. Has anyone else experienced this behavior? I can still get the desired active higlighting using the active class as long as it remains supported, but I would like to be able use the recommended is-active class. Any suggestions would be appreciated.

Rafi Benkual about 1 month ago

You should use a `>` selector to only affect the direct children

Example: https://codepen.io/rafibomb/pen/wZyOxL

George Benthien about 1 month ago

Rafi

I wasn't trying to write css for is-active, I was just pointing out what inspecting the active element with the browser dev tools showed as far as which css element was dominating the selection of the background for the active element. I have not been able to get is-active to work properly, but the deprecated active works perfectly. I did try inserting the code you mentioned in my css to see what would happen. It did highlight the active element correctly, but any other item on the top-bar that had a dropdown menu was also highlighted when you hovered over it. That didn't happen for elements on the top-bar that didn't have a dropdown menu.

George

George Benthien about 1 month ago

Here is a simple example to show the problem. Copy the code for Top Bar from the docs, namely

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Paste this code in index.html. This will produce the top bar shown in the docs. Now add the class "active" to the second li element. This will correctly highlight Two on the top bar. now change the class active to "is-active". I now see no highlighting on the top bar. If I add the css that Rafi suggested, namely

.menu > li.is-active {
  background: salmon;
}

I do get a salmon colored background on Two. However, if I hover over One on the top bar, the salmon background moves to One. If I then move away, all highlighting is gone.

 

 

 

 

 

 

 

 

 

 

 

 

 

h