Posted by Matt75 on Sat, May 10, 2025 - 6:00am

Hello,

Is there a way to use different primary menus depending on the viewport size?

First of all: I don’t mean the typical breakpoint where a mobile menu with a toggle button is shown.

Instead, my theme has multiple “desktop resolutions” like 1156, 960, and 856 pixels wide, which I want to fill with a regular (non-mobile) menu as efficiently as possible.

For example, at 1156 pixels wide, I want to show:
Menu-Link-1 Menu-Link-2 Menu-Link-3 Menu-Link-4 Menu-Link-5 Menu-Link-6 Menu-Link-7 Menu-Link-8

At 960 pixels:
Menu-Link-1 Menu-Link-2 Menu-Link-3 Menu-Link-4 Menu-Link-5 Menu-Link-6 OTHER
(with children links: Menu-Link-7, Menu-Link-8)

At 856 pixels:
Menu-Link-1 Menu-Link-2 Menu-Link-3 Menu-Link-4 Menu-Link-5 OTHER
(with children links: Menu-Link-6, Menu-Link-7, Menu-Link-8)

Is this possible in any way?
 

Accepted answer

With JQuery, simple and fast.
Or put all possible links in one menu, and hide unnecessary with CSS mediaquery.

Comments

Sat, May 10, 2025 - 7:08am by yorkshirepudding

I've not done this with a menu before but something similar with different Views presentation blocks for different resolutions (i.e. not just responsive but a different presentation method).

If this is always going to be a relatively static menu with not lots of frequent additions or changes then you could create multiple menus with the links in.  Each node or other menu target will only be associated with 1 when you look at it.

You can then add different classes (e.g. menu-1156, menu-960, menu-856) to the menu blocks as you add them to the layout and target those classes differently in your media queries for each resolution. 

Sat, May 10, 2025 - 10:06am by Enthusiast

With JQuery, simple and fast.
Or put all possible links in one menu, and hide unnecessary with CSS mediaquery.