Support » Theme: GovPress » Mobile Menu

  • Resolved drinkingsouls


    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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author govfresh


    You would need to edit the stylesheet.

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

    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) { ... }
    Andrew Cato


    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.



    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile Menu’ is closed to new replies.