This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.


Different Main Menus for Screen Sizes?

  • Creator
  • #25393

    Hi Jason,

    Is there any way to trigger a different main menu (configured via the WP appearance>menu) to show at each/any of the three non-phone sizes (full desktop, small desktop, tablet)?

    Sometimes we have a full menu left-to-right, and would be nice to reduce or re-arrange things for the narrower screen widths.

    Thanks in advance for any assistance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
  • #25395
    Jason Bobich


    No you can’t quite do this very efficiently since this is all CSS-based. But, you can do this, which is close to what you’re wanting:


    Hi Jason,

    Thanks for this — it works a charm in iPhone and iPad (regular).

    But in iPad Pro (the larger size version) it breaks the menus — (in ~two ways):

    1) The mobile menu is correctly delivered to the iPad Pro (since it represents itself a mobile device), but the new mobile menu now displays horizontally in place of the regular main menu, across the screen.

    (I suspect that the iPad Pro is too wide in pixels to trigger the switch from desktop to mobile-on-the-side) menu. Indeed if I swipe in the split-screen view on the iPadPro, the side-mobile menu gets triggered.)

    By itself, this is not a huge problem. But I have added a few more (quick) links to the (beginning of) my mobile menu, and so now the apparent main menu wraps to a second horizontal line in the iPad Pro.

    2) By itself, while this is all a bit unsightly, it triggers a second issue with the theme — one that happens on any device even without the your Mobile Menu Function in place:

    If the main menu wraps to a second line (because too many links to fit horizontally in one line), then the sticky menu is triggered and partly protrudes down from the top of the screen — as if it thinks the page has been scrolled down.

    While this could have something to do with my CSS or other mods, it doesn’t feel like it does.

    SO here are my two questions:

    ONE: Regarding the Mobile Menu Function: Is there a way to filter out the iPad Pro from receiving the new Mobile Menu?

    TWO: Is the too-many-links-in-the-main-nav-bar a bug in the theme?

    Take a look here:

    You can see for yourself by using Safari Browser on a desktop, by switching to USER AGENT: Safari iOS: iPad.

    Jump Start 2.0.4 with Theme Blvd Framework 2.5.2


    NEVER MIND on Q:1.

    I fixed what I needed via CSS.

    But Q:2 still seems happen — though not for me any more.



    Ugh — False alarm #2.

    I think I see what was happening.

    I now see that the sticky menu is a full second output/copy of the main menu.

    And so if there are too many links to fit in one row within the top level of the main menu, then the sticky menu would also have too many links, and would also wrap to a second line — thus protruding down from behind the top of the screen (where it’s probably trying to hide, just out of view).

    So maybe my whole initial issue (above) was caused because the Custom Mobile Menu Function was forcing its new custom menu to replace the main menu (by design) — but was in fact also replacing the sticky menu up above the top of the screen.

    (Here’s the rub): I had attempted to expand that side mobile menu by adding a few “quick links” to the beginning (now, top) of that (already quite full) main menu — reasoning that the new links would fit since it now is supposed to appear vertically in the side slide out menu.

    But since the Custom Mobile Menu Function effectively replaces the main menu, it also added those links to both the original and sticky menus. THE PROBLEM then came when the page was viewed on iPads with enough width — where the CSS triggered the regular horizontal nav menus to display — but they were still getting the new Mobile Menu. And so they both (the regular and sticky) now had too many links in them to fit horizontally, so they both wrapped to a second line, and as such the sticky menu now became too tall to fit fully hidden up behind the top of the viewport.

    Ultimately, it looks like the if>wp_is_mobile method is not robust enough to detect wide-screen (or, side-oriented) mobile devices that could otherwise display the regular menu.

    IN THE END — I was able to achieve my “additional quick links” effect in the mobile slide out menu via CSS — however had to the hide the new links from both the main and sticky menu output.


    See it working correctly now in action here:

    Jason Bobich

    Yeah, a lot of this just has to do with how you organize the top-level main menu items. If you’re going to have a lot of buttons, that is more than the theme is designed to handle, then you’d need to make them smaller with CSS.

    But I understand the need to want to have more links and buttons, and so that’s why I added the side panel feature for the next update. Basically, it’s just a couple of additional menu locations that you can choose to utilize.

    And to answer your original question, if you’re wanting to target a specific device through your PHP, you would do it by analyzing the user-agent the browser sends back.

    This is what the wp_is_mobile function does. If you look at it, it’s got this long list of known mobile browsers it’s checking for in the returned user agent. If any of them exist in the user agent, it returns true.


    Awesome! Excited to see the next update!

    Thanks as always.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.