Optimising dropdowns (mobile)

attronarch · June 2018

Hi

I have one problem, actually it´s more of an UX nature, so this my menu looks on mobile:
https://goo.gl/SpfWWQ

1. How can i change these + symbols into something else for a dropdwon, for example with an arrow or make just that plus sign with a different color?

2. Is it possible that a toggle in a mobile menu is always fully opened? Because my state of them now is like this: https://pasteboard.co/HosavNk.jpg

So not the all of the main links are clickable and when someone clicks and nothing is happening - user will think that they not working, while the links to the content are actually in submenus.... little confusing yes. BUT is there a way to optimise mobile menu that user don´t need to click on a + sign to expand dropdown?

Some advices how to approach to this problem?

btaufflieb · June 2018

I have the same problem.
Even changing the color of the + symbol is difficult. In fact I didn't find where I could do that

Bryan · June 2018

hey,

1. You cannot change the icon, but you can change the color with this css

#Side_slide #menu ul li.submenu .menu-toggle::after {
    color: blue !important;
}

2. Sorry but this will be not possible. You would have to write custom JS for this to work.

You can make the whole field clickable with this css

#Side_slide #menu ul li.submenu .menu-toggle::after {
	position: absolute !important;
	right: 10px !important;
}
#Side_slide #menu ul li.submenu .menu-toggle {
	width:100% !important;
}

All other modifications would require you to add custom code or modify to theme files which we do not support.

thanks

attronarch · June 2018

Those two css codes had just solved all my problems! Awsome... thank you very much Bryan! : ))

cdiforest · February 2019

Do you have the code for the classic menu? This worked like a charm for side slide, but I'm stumbling over the classic version. Thank you.

Pablo · February 2019

cdiforest

Just remove the #Side_slide from beginnings of the code and it should work.

Thanks

verveconcepts · June 2020

Thank you soo much

WillySong · November 2022

where should i put the above code?

Phil · November 2022

Hi @WillySong,

Please, put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

Optimising dropdowns (mobile)

Comments

This website uses cookies