Menu Underline Indicator

  • Resolved netniks

    (@netniks)


    8 years, 4 months ago

    Hi,
    I added the following CSS to my child theme for Tracks:

    #menu-item-58 a,
#menu-item-58 a:link,
#menu-item-58 a:visited {
  color: #f49836;
}
#menu-item-58 a:active,
#menu-item-58 a:hover,
#menu-item-58 a:focus {
  color: #f78d1d;
  border-bottom:4px solid #f78d1d;;
  -webkit-transition: all .1s ease-in .1s;
  -moz-transition: all .1s ease-in .1s;
  transition: all .1s ease-in .1s;
}

    …but I’m unable to get the underline to stay on the active page of the menu item. The only other possible solution for this that I saw required javascript. Is there an easier way to add this to my Tracks child theme?

    Thanks and regards,
    Todd

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter netniks

    (@netniks)

    I just incorporated a smoother version:

    #menu-item-58 > a {
  position: relative;
  color: #f78d1d;
  text-decoration: none;
}
#menu-item-58 > a:hover {
  color: #f78d1d;
}
#menu-item-58 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #f78d1d;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

    Again, however, I don’t know how to implement the resting state of keeping the underline on the corresponding menu item page.

    Thanks,
    Todd

    Theme Author Ben Sibley

    (@bensibley)

    There is in fact an easy this can be done with just CSS. Here is the complete code:

    #menu-item-58 > a {
  position: relative;
  color: #f78d1d;
  text-decoration: none;
}
#menu-item-58 > a:hover {
  color: #f78d1d;
}
#menu-item-58 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  opacity: 0;
  background-color: #f78d1d;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}
#menu-item-58 > a:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  opacity: 1;
}
#menu-item-58.current-menu-item > a:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  opacity: 1;
}

    The last part is where the underline is set to display automatically on the current page. The menu items (li elements) will always have a current-menu-item class added to them when on their page. I’ve added this as a qualifying class to the ID selector.

    I also switched visibility to opacity for fading in the underline as this seems to work smoother across browsers, but you can omit the opacity part entirely if you’d like since the scaling hides the line already.

    Lastly, I updated the transition values to specifically target the transform and opacity properties. Using “all” in transition can cause weird displays issues (Safari in particular).

    Thread Starter netniks

    (@netniks)

    Wow, Ben… you dialed-in on my need for a persistent menu state with just two CSS classes. That’s pretty neat!

    I had to employ javascript on an older WordPress site to accomplish this, and I expected the same with Tracks, so I can appreciate how you had a .current-menu-item already defined.

    This makes a theme from Compete Themes so much easier to customize for individual needs, and really rewarding to work on.

    Thanks!
    Todd

    Theme Author Ben Sibley

    (@bensibley)

    Glad you liked that! There’s lots of CSS classes like this in Tracks that I use extensively for designing the theme. The body element in particular has many that are great for page targeting.

    If anything else comes up let me know, and I’ll be happy to assist.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu Underline Indicator’ is closed to new replies.

Tags