Trigger mobile menu at different width

  • Author
    Posts
  • #101505

    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 1 year ago by BSobek.
    • This topic was modified 1 year ago by BSobek.
    #101932
    Zed
    Cryout Creations mastermind

    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 read the available documentation and search the forums before posting.
    #101950

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

    #101967
    Zed
    Cryout Creations mastermind

    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 read the available documentation and search the forums before posting.
    #103179

    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.

    #103456
    Zed
    Cryout Creations mastermind

    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 read the available documentation and search the forums before posting.
    #108393

    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

    #108749
    Zed
    Cryout Creations mastermind

    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 read the available documentation and search the forums before posting.
Viewing 8 posts - 1 through 8 (of 8 total)

You need to log in to reply to this topic.