Earlier in the year, I made this site have a more readable and responsive layout. My brain seems to like it, as it has yet to force me to put off everything else in my life to redesign it. One of the easiest things to pull off responsive-wise in WordPress is truncating your navigation menu list to show less links if there is less space.
Normal screen size:
On a normal computer screen, the menu has enough space for all the links!
Itty bitty screen size:
When the screen size is small, only the important menu links remain.
So this menu is a WordPress custom navigation menu. I decided that the “home,” “about,” and “rss” links were important to keep on mobile devices, so I gave the other menu items the class “non-mobile” on the Appearance > Menus page.
Notice that “My Tumblr” gets the class “non-mobile” because I want it to disappear on mobile/small-screen devices.
If you can’t find the text field for adding CSS classes in your menu boxes, make sure to check off “CSS Classes” in the Screen Options’ Advanced Menu Properties:
Then in my stylesheet, I used a media query to hide all “non-mobile” links were the screen size to decrease to below a certain size (in this blargh’s case, 660px):
@media screen and (max-width: 660px) { .non-mobile { display: none; } } |
Simple, painless, and sweet. Like Jello wrestling a bear.
My name is 
You are a wizard! I am stealing this!