WordPress.org

Ready to get started?Download WordPress

Forums

GovPress
[resolved] Mobile Menu (5 posts)

  1. drinkingsouls
    Member
    Posted 3 months ago #

    Hey,
    I've been modifying GovPress and I've noticed that on an Ipad the menu is displayed as a mobile menu. I'd like to disable this so the menu looks the same as on a PC. How can I do this?
    Thanks

  2. govfresh
    Member
    Theme Author

    Posted 2 months ago #

    You would need to edit the stylesheet.

    The breakpoint is at @media screen and (min-width: 1100px).

  3. janubande007
    Member
    Posted 2 months ago #

    Actually the proper solution is scaling media queries utilizing elements to determine layout width instead of screen resolution. You need at least 2 steps before displaying a mobile menu. Mobile menu should only come on phones or mini tablets. I've done this on another website. Below is the solution I have found works well.

    /* Tables and Phones - collapse sidebar, etc. */
    @media all and (max-width: 68em) { ... }
    
    /* Phones only - hide wide menu, display mobile menu, etc. */
    @media all and (max-width: 45em) { ... }

    Below are additional media queries if you want to get into more specific styling for very specific type of displays:

    /* Desktops only */
    @media all and (min-width: 68.01em) { ... }
    
    /* Tablets and Desktops */
    @media all and (min-width: 45.01em) { ... }
    
    /* Tablets only */
    @media all and (min-width: 45.01em) and (max-width: 68em) { ... }
  4. Andrew Cato
    Member
    Posted 2 months ago #

    Would there be an easy way to create a second navigation bar to kick in during mobile viewing?

    My site's navbar has several drop-down menus, so it's a little overwhelming when you open the menu on mobile.

  5. janubande007
    Member
    Posted 2 months ago #

    Andrew, if your mobile menu is overwhelming on a Mobile device then it means you have not designed your website with Mobile navigation in mind. I would suggest you redesign your website navigation if a large number of people are going to be viewing your site on mobile.

    PS. It is pretty common these days to see a phone screen completely full (and more) by a mobile menu. If your traffic from mobile phones is expected to be low, I wouldn't worry about it. You can use the above CSS I have provided and the mobile menu should only show on Phones and may be Mini-Tablets, but your full navigation bar will be seen on full size Tablets without the sidebars if you customize it that way like I have on another site.

Reply

You must log in to post.

About this Theme

About this Topic