Drop Down Menu

Hello,

The categories on drop down menu shows arrows next to each category, and only one of the category (wire lights) has subcategories.

How to remove these white arrows from categories on drop down menu that have no subcategories.

https://prnt.sc/u0vlq0

Best,
Dariusz

Hello,

These arrows appear when the menu items have sub-items regardless if there any subcategories or there is none.

Do you want to remove the arrows with custom CSS or remove the sub-menu items?

Best Regards

Hi Elise,

I’ve just noticed that after hovering over category “Shop By Lighting Collections” in which there are 4 subcategories, 3 of them appear without arrows (on mobile only 2), and only one with an arrow.

desktop – https://prnt.sc/u0zq0d mobile – https://prnt.sc/u0zvg3

The ideal would be an arrow next to the subcategory that have additional subcategories (I mean next to wire lights).

However, if this is not possible, I’d like to remove them all.

I’m not sure what’s the difference between removing the arrows with custom CSS or remove the sub-menu items.

Best,
Dariusz

Hello,

Please provide the site admin access to the private area.

Best Regards

Hello

Hello,

Please provide the page login URL.

Best Regards

Page url

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme.

Best Regards

Hi Eleise,

If I switch the parent theme, will all the settings and configurations be the same?

If it works on the parent theme should I use it instead of the child theme?

Best,
Dariusz

Hello,

The theme settings would be the same both on the child and on the parent. The only difference is the custom code containing in the child theme. This code would not work cause the child theme has been disabled. At the same time, this code is not correct as it influences other functionality.

Best Regards

Hi Elise,

I deactivated all the plugins not related to the theme and switched the parent theme. However there was no change. So I’ve restored to the previous settings.

What else can be done to fix it?

Best,
Dariusz

Hi Elise,

I’ve found a similar topic on forum and added the below code to custom css. The arrows disappeared from desktop but remain on mobile. Could you help to remove them from mobile devices?

body .basel-navigation .menu>li.menu-item-design-default ul li.menu-item-has-children:after {
display:none;
}

Best,
Dariusz

Hello,

If I remove the errors you will not be able to view the sub-menu items. You can remove sum-menu items from the mobile menu and arrows would disappear.

Best Regards

Hi Elise,

I’d like to remove sum-menu items from the mobile menu. Please let me know how to do this.

Also, can you remove errors because I don’t want to have them on my website. After removing errors, can you fix it, so if I’d like to add these sum-menu items in the future, they will be available?

Best,
Dariusz

Hello,

Here is the WordPress manual on how to create a menu and multi-level menu: https://codex.wordpress.org/WordPress_Menu_User_Guide

Best Regards

Hi Elise,

I’ve just removed the sub-categories and added them back, and it works. Thank you for your help.

Best,
Dariusz

Hello,

You have not removed the sub-items in the Mobile menu: https://gyazo.com/3bab0f7bb73b3ad64f75af9c676fd695

Navigate to Appearance > Menu> choose the mobile menu, and remove the sub-items https://prnt.sc/u2nofs

Best Regards

Hi Elise,

Thanks for checking.

We were talking about “sum-menu items” and for some reason I thought it referred to arrows, so I wanted to remove them.

I’ve realised that there are “sub-menu items” and they refers to sub-categories. The sub-categories I’ve added to mobile menu have to stay because I want to keep the desktop and mobile versions consistent.

So, if there is any code I could add to the custom css to remove arrows from mobile menu, I would happily use it.

If not I’ll leave it as it is.

Best,
Dariusz

Hello,

You have the option to create two menus: for mobile without sub-menu items (as the result arrows would disappear) and you can create the menu for the desktop (main menu) with the sub-items and drop-down menu with arrows. Or if you want I can remove the errors on desktop.

Here is the CSS code to remove arrows on mobile:

.mobile-nav .icon-sub-menu {
display:none;
}

Best Regards

Hi Elise,

I’ve used the code in custom CSS. Now I like how the menu looks on mobile. Thank you.

Could you tell me, what desktop errors you refer to now?

Best,
Dariusz

Hello,

I was talking about these arrows: https://prnt.sc/u3gq4e

Best Regards

Hi Elise,

I can manage right now. This issue is sorted.

Thank you for your help!

Best,
Dariusz

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts