[Support request] 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;
    }
}

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

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

[Leo]

Try this:

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

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

[Joy]

Worked thanks David!

[David]

You’re welcome

[Jim]

Thank you Leo & David… I wanted to do the same thing and your CSS code worked perfectly. I am so glad that I chose GeneratePress as my main choice for developing websites for my customers. I like using your themes, approach, and support better than using products like wpBakery. Keep up the good work.

[David]

Glad we can be of help! And thanks for the great feedback!!

[Ravi Dixit]

I do not want to remove the arrow from Menus with Sub-menu, but want to know how can I decrease the space between the arrow and menu.

[Leo]

Please open a new topic for your question as your question is different than the original topic.

Thanks!

[Author]

Posts