The Responsive Website Blues

[Martin Ford]

My boss has a Samsung pad. The site, http://www.starparish.com appears as it does on my desktop (doesn’t switch to mobile view with the menu in the corner). When he clicks on the INFO button in the top menu, it makes the submenus appear briefly before being sent to the page that INFO is linked to (Start-here).

Is there a way to make the mobile version appear on his Samsung?

or

Is there a way to make the top INFO button not link to anything but rather only display the menu when clicked on?

Thanks for your help!!!

[Bill Robbins]

Hey Martin,

Excellent question there. Traditional navigation menus can have trouble on mobile devices since you can’t actually hover with your finger over a menu item like you can with a mouse pointer.

We can switch the browser window size where the mobile navigation appears. Here’s how to do that:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 1024px) {
   	
   	#primary-menu {
   		display: none;
   	}
   	
   	.slicknav_menu {
   		display: block;
   		right: 0;
   		top: 10px;
   	}
   	
   	.slicknav_menu .slicknav_icon {
   		margin: 4px 0 0 7px;
   	}
   }
   

4. Save your changes.

That should catch browser windows that are 1024 pixels wide and narrower. The old cutoff was 767 pixels. Feel free to change the 1024px in the snippet above to a different size if you need to.

Let me know if you have any questions or trouble.

Bill

[Martin Ford]

Fantastic! Worked! Thanks a million!

[Bill Robbins]

Glad to hear that did the trick Martin. Let me know if you need anything else.

[Author]

Posts