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.