Question

I’m in the process of turning a clients wordpress site into a responsive design, mostly just building a mobile version.

The client has expressed that they don’t want all of their pages to appear on the mobile site, so instead of the full 7 primary menu items, I’d only be using 5.

I’m not sure what the best way to do this would be, I’ve only ever built Mobile sites separately before. Any input would be appreciated, or links to tutorials / information regarding what I’m trying to do. Thank you.

Answer 1

You could give those elements custom classes and then hide them based on device max-width. You can setup any number of rules like this and this is what is commonly known as a media query. It’s the basis for changing styles based on size.

@media only screen and (max-width: 959px) {
    div.desktop-only {
    display:none;
    }
    }

You can also set a range.

@media only screen and (min-width: 768px) and (max-width: 959px) { /*code here*/ }