Hi,
My onepage menu was working on mobile but now it is not. I have tried various CSS and JS changes included on other threads and have not got the mobile menu to work.
Hi there,
The one page navigation is not working on mobile because there are two sections with the same ID. As a rule there should only be one occurrence of an ID in a page.
Please try to set the ID of the performance section that should show up on mobile to something else. Then go to Appearance > Menus > Screen Options then tick the CSS Classes option then go back to the menu items and you should be able to see the CSS Class box for each menu items.
If you have menu items that links to a section with a desktop and mobile version, create two menu items with the same label and set the URLs accordingly.
Both of the menu items will show up on the site if you try to load it up. In order to have the correct menu item display accordingly to specific screen width, you can make use of predefined classes which you can add in the CSS Classes (optional) field of the menu items:
cs-hide-sm cs-hide-xs > add these class to the menu item that you want to to be hidden on mobile
cs-hide-xl cs-hide-lg cs-hide-md > add these classes to the menu item that you want to be hidden in large screens and desktops
Hope this makes sense.
Makes perfect sense. Thanks!
You’re welcome!