Remove Dropdown Arrows from Navigation

[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.

[Leo]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Leo]

Edited the CSS above:
https://generatepress.com/forums/topic/remove-dropdown-arrows-from-navigation/#post-970396

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tru]

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

[Leo]

Can you link me to the site in question?

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joy]

Worked thanks David!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts