Mobile, Side Menu - SUPER SMALL

jgatter · March 2019

Hi!

This is something we had issues with before, but after hiring a website design audit service (darn expensive, gosh!!). the auditor made some comments and the following was included. (he was hired just for the review and nothing else so it is non biased, and he was totally against our choice to use BE THEME and I want to prove him wrong!!! I completely believe in BeTheme!)

Anyway, the things we need to fix according to him (we also thought these were needed)

1. The Menu for mobile, the letters are too small and the + sign is SO tiny, no one can see it.

How to change these?

2. The other mention is, the side mobile menu covers almost 90% of the screen. How to change it so it covers only 50 or 60% for example?

Thank you very much!

Bryan · March 2019

Hello,

1. This can be changed with css, send us a link to the page.

2. You can change the side slide width in theme options>responsive>header - side slide width.

cheers

jgatter · March 2019

1. https://goo.gl/TgQQqm You will notice that even the sub-menus the fonts are larger than the main. The + is so small, and the color is very weak. I would love to make it darker, bold and larger.

2. Thank you so much! This is for both mobile and desktop right?

Thank you again.

Pablo · March 2019

1) Paste this CSS into the Theme Options > Custom CSS & JS > CSS

#menu-main_mobile li span{
  font-size:18px;
}

2) It's for mobile and tablet, for desktop it will display the header layout selected in the Theme Options > Header & Subheader > Header

Thanks

jgatter · March 2019

Thanks a lot. However, the " + " didn't change the size, any way to change the size and color of the + to open the menu please?

Thanks!

Pablo · March 2019

Use this CSS too:

@media (max-width:768px){
  .menu-toggle{
    font-size:36px !important;
    font-weight:800 !important;
    color:red !important;
 }
}

Thanks

jgatter · March 2019

Thanks, and for the color of the "+" ? Thank yo so much!

jgatter · March 2019

Oh... I forgot... and BOLD. Thanks!

Pablo · March 2019

I've updated the code above.

It should do what you want now.

Thanks

jgatter · March 2019

Ahhh! That's what I was missing... I was using the word BOLD! Thank you so much. FANTASTIC!!!

Almost perfect, I will prove that reviewer wrong. Thank you so much.

One last question, any way than when you click the MENU, it automatically expands, without having to click on the + sign, as the reviewer was suggesting?

Thank yo so much again. You rockl!

Bryan · March 2019

Hey,

we can help you with css for this but please fix the link first so we cn access the website.

we get this: http://prntscr.com/n1d8di

thanks

jgatter · March 2019

https://goo.gl/TgQQqm

The URL is correct, I think the link that was automatically added by the forum added a few strange things... let me try again, otherwise just try the URL.

Thank you SO MUCH!!!

Bryan · March 2019

Try 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;
}

thanks

jgatter · March 2019

Thank you. It made no difference unfortunately.

Pablo · March 2019

I've updated the code above.

It will work now fine.

Thanks

jgatter · March 2019

Thank you so much!!!

Awesome! Yes... proving the auditor wrong!!! THANKS!

Mobile, Side Menu - SUPER SMALL

Comments