CODEWITHSUNDEEP
wordpresswordpress-theming
Axonn
Axonn

Reputation: 10336

How can I make WordPress show different menu entries when my site is accessed from a mobile browser?

WordPress already allows us to create multiple menus and edit their items. I would like to offer one kind of menu (with more items) to my users coming from desktop browsers and a more condensed menu to user-agents which reveal that they are using mobile browsers.

My theme is already using a responsive menu which shrinks it when the screen size is too small, but I'd like to take it one step further, since I have a bit too many options in my main menu to make for comfortable browsing on mobile.

Upvotes: 0

Views: 58

Answers (1)

danjah
danjah

Reputation: 1246

If you are only to subtract elements, not add anyone new, I would go about this using pure CSS.

An example:

@media screen and (max-width: 700px) {

   .menu_element1 {
     display: none;
   }

}

If by 'one step further' you mean displaying a totally different menu, not just subtracting, but also altering or adding new elements, you could probably create several menus and load the correct one using wp_is_mobile(); Althought from Codex it seems this is not recommended, since tablets are considered mobile devices - and probably isn't bulletproof in other aspects either.

A third alternative would therefor be to use Javascript to determine the screen size and load the appropriate stylesheet.

Upvotes: 1

Related Questions