Materialize dropdown changing font size after click

Question

I'm using Materializecss in a Rails project and I'm getting a weird bug in my navbar. On first glance, my customized css is rendering properly for the dropdown font size and colour. However after I click on a dropdown link, the original Materialize default font size and colour will flash. Here's a JSFiddle I did to simulate the problem: https://jsfiddle.net/sayyl/x11xv5k9/. Note that while in this Fiddle the font stays dark grey, on my own project the text flashes the default Materialize green. The font sizing error is the same on both.

_nav.html.erb

<nav>
<!-- Profile Dropdown Structure -->
<ul id="settingDrop" class="dropdown-content">
  <li><%= current_user.full_name %></li>
  <li class="divider"></li>
  <li><%= link_to "Edit Profile", edit_user_path(current_user) %></li>
  <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
</ul>

<!-- Alert Dropdown Structure -->
<ul id="alertDrop" class="dropdown-content">
  <li class="alert">          
    <% if !current_user.confirmed_at %>
      Confirm your email
    <% end %>
  </li>
</ul>


  <div class="nav-wrapper">
    <a href="/" class="brand-logo">LOGO</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

    <ul class="right hide-on-med-and-down">
        <li class="alert">
          <a class="dropdown-button valign-wrapper alert" href="#!" data-activates="alertDrop" data-beloworigin="true"><i class="fa fa-bell fa-lg" aria-hidden="true"></i></a>
        </li>
        <li><a class="dropdown-button valign-wrapper" href="#!" data-activates="settingDrop" data-beloworigin="true"><%= image_tag @user.avatar.url(:thumb), class: "circle responsive-img" %> <i class="material-icons">arrow_drop_down</i></a></li>
    </ul>

    <ul class="side-nav" id="mobile-demo">
        <li><%= current_user.email %></li>
        <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
        <% if !current_user.confirmed_at %>
          <li class="alert" style="color:#e74c3c"><i class="fa fa-bell" aria-hidden="true"></i> confirm your email</li>
        <% end %>
    </ul>
  </div>
</nav>

nav.scss

nav {

.nav-wrapper {
  background-color: #e7e6e4;
  color: #505050;
  font-family: 'Raleway', sans-serif;

  .brand-logo {
    color: #000;

    .logo-highlight {
      color: #b8d6c6;
    }
  }

  a {
    color: #505050;
    padding: 0 15px 0 8px;
  }

  .alert {
    color:#e74c3c;
    padding: 0 15px 0 8px;
  }

  ul {
    height: inherit;

    img {
      height: 50px;
      border: 1px solid #fff;
    }
  }

  #settingDrop,
  #alertDrop {

    min-width: 150px !important;
    &.dropdown-content.active {

      li {
        color: #505050;
        font-size: 12px;
        line-height: 12px;
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 8px;

        &.divider {
          min-height: 0;
        }

        &.alert {
          color:#e74c3c;
        }

        i {
          height: inherit;
          line-height: inherit;
        }

        p {
          font-weight: 500;
          font-size: 14px;
        }

        > a {
          color: #505050;
          padding: 0;
          font-size: inherit;
          line-height: inherit;
        }


        a:hover {
          background-color: rgba(0,0,0,0);
        }
      }

      li:first-child {
        margin-top: 10px;
      }


    }
  }

}

}

Answer 1

This is probably because you are styling the .active class. This class changes when you click on the dropdown opener/closer which would explain why there is no flashing when you open the dropdown but when closing it. Try styling the dropdown contents without this class and you should be fine.