Menu bar appears as mobile menu on some screens

rjdesign1 · March 2016

We have had several people tell us that when they load our site on a desktop computer or laptop that there is no menu bar. (We are using the magazine header.) What they are seeing is what should be the mobile screen (with the three lines as the menu); even on a desktop computer being viewed at full screen size. After some research, we discovered that they had their screen resolution set to a lower pixel number than recommended. (So they can see things better.) When they increase the pixel number of their laptop/desktop computer then the website appears as normal with the correct magazine header menu. So, it is as if the resolution setting of their computer screen is causing the site to load as the mobile site rather than the desktop site.

1.) Is there a way to address this issue within the admin side of the theme so that the website loads correctly even if a laptop/desktop screen resolution is set to a small pixel number? If so, can you provide instructions?

2.)The point where the responsive site re-formats to a tablet size may be part of the issue. Is it possible to turn off or adjust the "tablet" size? If so, please provide instructions.

While discussing menu items, on the mobile menu (with the three lines) the submenus show as an almost invisible "+" sign, It is hard to see that there are additional sub pages because the + sign is the same color as the background color.

3.) Where can I change the color of the + sign on the mobile drop down menu so it can be seen better?

Albert · March 2016

Hi,

1) To display regular menu instead of mobile on smaller screens, you must change the value of Responsive Menu Initial width option under Theme options > Responsive section.

2) This requires files customization so it's not possible.

3) To change their color, you must use extra css:

#Top_bar #menu ul li.submenu .menu-toggle { color: #000 !important; }

rjdesign1 · March 2016

Thank you for your reply. I think I must be missing something. 1.) I have tried changing the Theme Options>Responsive section "Responsive Menu Initial width" to different numbers, and while the menu items will be listed, the background bar behind the menu items "disappears" when scrolling down the page, the menu displays over the top of all the items on the site - over the top of copy, photos, etc. I've tried turning on/off options under Theme Options>Responsive, sticky on tablet, menu button sticky, etc. but it doesn't change the fact that when scrolling down the page, the background of the menu bar is missing and the menu is just listed/shown over the page items/copy. How do I fix this?

2.) Ok -- I understand this

3.) Do I place the above css under Theme Options>CSS? or somewhere else? Also, will this create a problem when updating the theme?

Albert · March 2016

1) Please show us on screenshot what is happening exactly. Also, please provide the link to site where this happens.

3) Each custom css should be located under Theme options > Custom CSS & JS > Custom CSS section. All settings are stored in database so you won't lose any of them while update.

Menu bar appears as mobile menu on some screens

Comments