[Support request] Remove Dropdown Arrows from Navigation

Home Forums Support Remove Dropdown Arrows from Navigation

  • This topic has 10 replies, 4 voices, and was last updated 2 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #970391
    Livia

    I wanted to remove just the dropdown arrows from the nav menu and it worked with this code:
    .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }

    .main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 10px;
    }

    However, it removes the dropdown menu all together on tablets and mobile devices. I just want to remove the arrows on all devices keeping the dropdown menu.

    #970396
    Leo
    Staff
    Customer Support

    Hi there,

    The page you linked isn’t loading for me.

    Can you try this first?

    @media (min-width: 769px) {
        .menu-item-has-children > .dropdown-menu-toggle {
            display: none;
        }
        .main-navigation .main-nav ul li.menu-item-has-children > a {
            padding-right: 10px;
        }
    }
    #970406
    Livia

    that works Leo. Thank you. One more thing, how could we change it so that only the submenus have arrows but not the top level?

    #970544
    Leo
    Staff
    Customer Support
    #1344073
    Tru

    hi, I’d paste your code into “Additional CSS”, but it does not work.

    #1344619
    Leo
    Staff
    Customer Support

    Can you link me to the site in question?

    Feel free to open a new topic so you can use the private URL field.

    #1346001
    Leo
    Staff
    Customer Support

    Try this:

    @media (min-width: 769px) {
        .menu-item-has-children .dropdown-menu-toggle {
            display: none;
        }
    }
    #1375459
    Joy

    Hi Leo,
    Hope all is well. I’m trying to do the same thing and this code you wrote above works well for me. Copied again here:

    @media (min-width: 769px) {
        .menu-item-has-children .dropdown-menu-toggle {
            display: none;
        }
    }

    But, it seems to make the space between menu items inconsistent. For example, the space between our first menu item (Lifestyle) and the second (podcast) is much wider than the difference between (podcast) and (about).

    Any ideas on how to fix this? I took out the code for now given it looks pretty weird but let me know if you need me to add it back so you can see it better.

    Many thanks,
    Joy

    #1375618
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 769px) {
        .menu-item-has-children .dropdown-menu-toggle {
            display: none;
        }
    
        .main-navigation .main-nav ul li.menu-item-has-children>a {
            padding-right: 10px;
        }
    }
    #1381351
    Joy

    Worked thanks David!

    #1381484
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.