- This topic has 10 replies, 4 voices, and was last updated 7 months ago by
David.
-
AuthorPosts
-
July 29, 2019 at 12:16 pm #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.
July 29, 2019 at 12:25 pm #970396Leo
StaffCustomer SupportHi 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/July 29, 2019 at 12:35 pm #970406Livia
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?
July 29, 2019 at 4:17 pm #970544Leo
StaffCustomer SupportEdited the CSS above:
https://generatepress.com/forums/topic/remove-dropdown-arrows-from-navigation/#post-970396Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 27, 2020 at 5:33 pm #1344073Tru
hi, I’d paste your code into “Additional CSS”, but it does not work.
June 28, 2020 at 9:10 am #1344619Leo
StaffCustomer SupportCan 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/June 29, 2020 at 10:38 am #1346001Leo
StaffCustomer SupportTry 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/July 24, 2020 at 8:06 pm #1375459Joy
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,
JoyJuly 25, 2020 at 1:50 am #1375618David
StaffCustomer SupportHi 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/July 29, 2020 at 10:33 pm #1381351Joy
Worked thanks David!
July 30, 2020 at 1:26 am #1381484David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.