Optimising dropdowns (mobile)

edited June 2018 in Menu / Mega menu
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?




Comments

  • 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
  • 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
  • Those two css codes had just solved all my problems! Awsome... thank you very much Bryan! : ))
  • 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.
  • Just remove the #Side_slide from beginnings of the code and it should work.
    Thanks
  • Thank you soo much
  • where should i put the above code?

  • Hi @WillySong,

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


    Best regards

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.