[BSobek]

Hi everybody.
I am trying to find out how to introduce mobile menu earlier. My menu has many items and I need to change it at 700 px to mobile instead of 480px I guess. Can you help me please?

• This topic was modified 4 years ago by BSobek.
• This topic was modified 4 years ago by BSobek.

[Zed]

The mobile menu gets activated below 800px width, not 480 (this step is used in the style but for other changes).

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[BSobek]

That hasn’t answered my question. I need help not explanation. Where can I change it please?

[Zed]

The screen width-dependent styling is defined in the theme’s styling.
Search for the media queries applied at 800px to the #nav-toggle and #access display rules.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[BSobek]

I have tried it but it is not working. You claim it changes at 800px but I have an LCD which has 1050px and when I resize the windows the menu changes to the mobile menu at around less than a half of my screen ( less than 575px). This indicates 800px is not true. Check it again please.

[Zed]

It also depends what DPI your screen is set at (this can change the apparent width and make it different from the actual width in pixels making number assumptions invalid ).

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[elusive_elf]

If you want to change the point at which your site switches from desktop to mobile nav, this is what worked for me based on the above:

You cannot amend this using the custom CSS in wordpress, you have to amend the main Roseta stylesheet which you can find at $yourwebsite/wp-content/themes/roseta/style.css

Make a copy of it on your server, then download it via FTP. To make the change search for all instances of 800px and replace 800 with whatever width you’d like the menu to change at. The best way I’ve found to find out the px size you need is using chrome.

Right-click on the page, and click inspect which will open up the dev tools toolbar. Take chrome out of full-screen mode, then grab a side of the screen and start dragging it smaller. You will then see in the top right of the website window a width and height value appears. Drag the window smaller to see where you start to have issues, then use that value instead of 800.

I hope that helps

[Zed]

Any theme styling can be overridden with custom CSS without editing any files if this CSS is applied after the theme’s own styles (which happens by default with WordPress’ Additional CSS field) or irrespective of order if the custom CSS is more specific.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Author]

Posts