Mobile version – how to remove or resize menu items

[marc.natale]

I’ve been asked to remove or resize the menu items at the top of the screen on certain pages when viewed on a mobile device since some users were not aware that they would need to scroll down to view the content. For example, if you click on an employee on my site from a smartphone, I’d like it to open a new page to their profile page without the entire menu at the top. Is there any way to do this without removing the menu from the main site’s page? I have the child theme installed, but I wasn’t sure where to start or if there were separate mobile site files. Thanks!

Topic

[Jason Bobich]

Hello Marc,

It doesn’t quite work like how you’re expecting I don’t think; there is no separate mobile site or separate display. Your website is responsive and so it scales down with the viewport size. The theme only makes CSS changes with @media queries as the site scales down.

So any kind of CSS customizations you want to make would just go in the custom.css of your Child theme, and you could use @media queries to target mobile viewport like this. So if you wanted to hide the main menu, you’d do it with CSS most likely.

@media (max-width: 480px) {
      .page-id-123 #access { display:none; }
}

Note: The next update to the theme will have an option for you to have the main menu toggle open/closed on mobile like this:

[Jason Bobich]

Also, I’m not sure if you noticed, but the option does already currently have an option to reduce the menu down to a standard compressed select menu for mobile.

Appearance > Theme Options > Configuration > Responsiveness

The actual menu is less nice visually, but will provide a better mobile experience.

[marc.natale]

Thanks for the info, Jason. I’ll experiment with CSS @media queries to see what I can come up with.

[Author]

Replies