[Resolved] Change menus according to screen width

[Pete]

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

[Tom]

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 🙂

[Pete]

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

[Tom]

No problem 🙂

[Author]

Posts