[Support request] Underline animation on off canvas menu

Home Forums Support Underline animation on off canvas menu

  • This topic has 3 replies, 2 voices, and was last updated 12 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1021688


    I have used the following css to create a nice hover effect on my desktop navigation and I’d like it to apply to my off canvas mobile menu too. How should I amend it, so it works on mobile too? – Thanks

    .menu-toggle .mobile-menu {
    color: white;
    padding-left: 3px;

    .menu-toggle:before {
    color: white;
    content: “\f0c9”;
    font-family: GeneratePress;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;

    (min-width: 415px) {
    .main-navigation .menu > .menu-item > a::after {
    content: “”;
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;

    Customer Support

    Hi there,

    problem with doing that is touch devices don’t do hover so if the animation does trigger you probably won’t see it.


    Yes, I was being an idiot. Thanks for taking the trouble to get back to me, though 🙂

    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.