Mobile Options Tab

  • This article is relevant for Barton, Hayes, and Pearl users only.

All EmPress themes are mobile responsive, meaning they do not require a separate mobile template. Instead, our themes adjust to the size of the browser window readers are using. This means that whether your readers view your site on a desktop, tablet, or mobile phone, the theme will automatically wrap and adjust its settings to fit the size of the web browser.

The Barton, Hayes, and Pearl themes offer a number of mobile options that allow you to control particular settings based on the device your readers are using. Within the Mobile Options tab, you may adjust settings for mobile menu navigation, and tablet and mobile phone display options.

This Help Desk article will help you navigate the following:

MOBILE SETTINGS: GETTING STARTED

What to know about EmPress default mobile settings

Here are some good things to know about our default mobile settings:

  • When mobile navigation is enabled (Mobile Options > Mobile Navigation > Enable Mobile Navigation > ON), the navigation will inherit your existing primary menu. You can edit your primary menu in the Menus tab of the Customizer.
  • In Pearl and Hayes, you may create a separate mobile menu to override the primary menu, then assign it to the mobile menu location. This can also be done in the Menus tab of the Customizer.
  • The Phone Display Options Tab (Mobile Options > Phone Display Options) controls display or layout options for mobile view. It does NOT control items listed in your mobile menu. We discuss more common troubleshooting questions related to the Phone Display Options tab near the end of this article.

Accessing Mobile Options

To access mobile settings for your theme, navigate to Appearance > Customize > Mobile Options. 

The Mobile Options Tab includes sub-tabs titled Start Here, Mobile Navigation, Tablet Display Options, and Phone Display Options. You may also use native WordPress controls in the Customizer to change the view of the live preview, to show you how your site will look on mobile. 

Here's a short video showing you the above step:

MOBILE NAVIGATION TAB

This sub-tab of the Mobile Options tab controls general/global settings for your mobile navigation menu. It may be accessed by going to Appearance > Customize > Mobile Options > Mobile Navigation.

In EmPress themes, the  mobile navigation menu refers to the small, collapsed menu accessible near the top of the mobile browser. Here is an example of the mobile navigation menu:

Settings controlled in the Mobile Navigation tab include:

Enable mobile navigation 
  • Enables or disables the mobile menu completely
  • DON'T FORGET: The mobile navigation will display your primary menu by default. To create a custom mobile menu, assign a menu to the Mobile location.
Display Icon 
  • Shows or hides the "burger" menu icon. 
  • Compare these two settings:

Display Menu Text
  • Shows or hides the word "menu" 
  • Compare these two settings:

Choose Location

This setting controls where the mobile menu will display.

  • Top Left will display your mobile menu in the top left of the mobile browser window. 
  • After Primary Menu will display your mobile menu underneath the logo/header of your site, and centered to the browser window.
  • Compare these two settings:

TABLET DISPLAY OPTIONS TAB

Use the settings in this section to display or hide specific elements on tablet browsers/devices. Don't forget, some of the elements listed below must be enabled in other parts of the Customizer before they'd display on a tablet.

Header Options

Below is a list of elements you may opt to show or hide on tablets:

  • Top Left Menu (enable your site's Top Left Menu in the Menus Tab)
  • Top Right Menu (enable your site's Top Right Menu in the Menus Tab)
  • Social Media (enable and customize your site's social media icons in the Header Options Tab)
  • Search Button (enable and customize your site's social media icons in the Header Options Tab)
  • Feature Tab (enable your site's Feature Tab in the Header Options Tab, and create a dropdown menu for it in the Menus Tab)
  • Primary Menu (enable your site's Primary Menu in the Menus Tab)
  • Scroll Menu (enable scroll navigation in the Header Options Tab, and assign menu items to the navigation in the Menus Tab)
Layout Options
  • Sidebars (if you have enabled sidebars via the Blog Feed Options Tab, you may opt to show or hide them to tablet browsers)
  • Interstitials (if you have enabled interstitials via the Blog Feed Options Tab, and added content to them via the Widgets Tab, you may opt to show or hide them to tablet browsers)
  • Featured Post Feeds (if you have assigned any of your blog feeds to showcase Featured Posts in the Blog Feed Options Tab, you may opt to show or hide them to tablet browsers)
  • Featured Post (Hayes theme) (if you have enabled the Featured Post at the top of the Hayes Home Page, you may opt to show or hide it to tablet browsers)

PHONE DISPLAY OPTIONS TAB

Use the settings in this section to display or hide specific elements on mobile phone browsers. Don't forget, some of the elements listed below must be enabled in other parts of the Customizer before they'd display on a mobile device.

Header Options

Below is a list of elements you may opt to show or hide on mobile phone devices:

  • Top Left Menu (enable your site's Top Left Menu in the Menus Tab)
  • Top Right Menu (enable your site's Top Right Menu in the Menus Tab)
  • Social Media (enable and customize your site's social media icons in the Header Options Tab)
  • Search Button (enable and customize your site's social media icons in the Header Options Tab)
  • Feature Tab (enable your site's Feature Tab in the Header Options Tab, and create a dropdown menu for it in the Menus Tab)
  • Primary Menu (enable your site's Primary Menu in the Menus Tab)
  • Scroll Menu (enable scroll navigation in the Header Options Tab, and assign menu items to the navigation in the Menus Tab)
Layout Options
  • Sidebars (if you have enabled sidebars via the Blog Feed Options Tab, you may opt to show or hide them to mobile browsers)
  • Interstitials (if you have enabled interstitials via the Blog Feed Options Tab, and added content to them via the Widgets Tab, you may opt to show or hide them to mobile browsers)
  • Featured Post Feeds (if you have assigned any of your blog feeds to showcase Featured Posts in the Blog Feed Options Tab, you may opt to show or hide them to mobile browsers)
  • Featured Post (Hayes theme) (if you have enabled the Featured Post at the top of the Hayes Home Page, you may opt to show or hide it to tablet browsers)

TROUBLESHOOTING MOBILE MENUS

Below are a few common questions we receive about display options for mobile menus.

ISSUE: My mobile menu is not appearing on my phone.

There are three different issues that may be the culprit if your mobile/burger menu is not appearing in a mobile browser:

1. Ensure you have properly enabled mobile navigation. You can do this by going to Appearance > Customize > Mobile Options > Mobile Navigation and turning Enable Mobile Navigation to ON. Don't forget, your mobile navigation menu will automatically inherit the Primary menu of your site, so if you have not setup and assigned a menu to the Primary menu location, nothing would appear in your menu.

2. A caching or performance plugin is causing changes you have saved in the Customizer to not appear on your mobile site. You can read more about cache and how to clear cache on your mobile device here.

3. If you are using a performance plugin such as Autoptimize or WP Rocket, many will automatically set to combine JavaScript (JS) files as a default. This can cause scripts to work improperly, which includes some of the theme features on your site, like the mobile menu and the search bar. If your mobile menu is not appearing or expanding on tap, a good indicator that the culprit is a plugin interfering with your site scripts is to test the Search icon in your header too. If that doesn't work either, you've got a scripts issue! 

If this is the case, navigate to your caching/performance plugin settings page, and look for any settings that are aggregating/compressing/combining JS or scripts, or preventing JS from loading altogether. Ensure anything related to that is turned off. Save your changes, and be sure to empty cache via the plugin so your site cache is flushed.

ISSUE: How do I create a different menu for mobile altogether?

The mobile navigation menu (i.e., the small "burger" menu that appears in the header on mobile devices) will inherit your Primary menu as a default. However, you can create a completely separate menu just for mobile, and assign it in place of your Primary menu.

To do this:

1. Head to Appearance > Customize > Menus. If you already have a menu created that you wish to assign to the mobile navigation menu, simply click on it, look for the Menu Locations list, and check off Mobile.

2. If you wish to create an entirely new menu just for mobile, from the Menus tab, click Create New Menu. Add your desired items to the menu, then assign your new menu to the Mobile menu location.

All menu locations can be viewed by going to Appearance > Customize > Menus, then clicking on the View All Locations tab. Here, you can quickly see where various menus you've created have been assigned around your website.

ISSUE: I can see my top/primary menu on mobile. How do I hide it so I only have the smaller mobile menu?

You can hide your desktop menus by navigating to the Tablet Display Options and Phone Display Options tab. Typically if a user sees their regular primary or top menus on mobile along with the mobile navigation menu, they need only go to Appearance > Customize > Mobile Options > Phone Display Options, and ensure the corresponding menus are turned OFF.