Archived topic

Change menus according to screen width

3 replies · Started by Pete on September 21, 2016

Viewing posts 1–4 of 4

September 21, 2016 at 6:52 am #228272

Hi Tom, that's a good looking baby you got there!

I was wondering if there's a way to css hide/show 2 different menus according to the screen size. I'd like a different custom menu to show when the screen size hits 640px. What template file/s would I need to play with?

Cheers Pete

September 21, 2016 at 10:16 am #228355

Hi Pete,

Thanks! She's teething right now so I'm on about 3 hours of sleep. Not so fun.

Tough question.. I think giving the menu items custom classes is your best bet.

So give all menu items for one screen size a specific class, and the other menus another class.

Then hide the smaller screen menu items by default, and use media queries to display them and hide the others at 640px.

Let me know if that makes sense or not :)

September 21, 2016 at 3:22 pm #228435

Thanks Tom that makes sense. I completely forgot about the menu item classes. I'll give it a go. Thanks.

September 21, 2016 at 10:33 pm #228511

No problem :)

This archived topic is closed to new replies.

Start building better websites today.