beaverbuilder
4/8/2018 - 8:25 PM

Change menu link and icon colors on small devices

This snippet is used in the following knowledge base article – https://kb.wpbeaverbuilder.com/article/243-change-menu-link-and-icon-colors-on-smalll-devices

change-menu-link-icon-mobile-devices.css
content_copyfile_download
/* mobile menu color hamburger */
@media (max-width: 767px) { /* Makes these changes only when screen sizes is 767 px or less */
  .fl-page-nav-collapse ul.navbar-nav > li > a {
      color: #f8bf7a; /* Rule 1: Sets color for default expanded menu links */
  }
  .fl-page-nav-collapse ul.navbar-nav > li.current-menu-item > a {
      color: #d4dccd;  /* Rule 2: Sets color for active page menu link */
  }
  .fl-page-nav .navbar-toggle * {
    color: #c70919; /* Rule 3: Sets color for hamburger icon or MENU text */
  }
}