Skip to content
Docs

Make it look right on phones

Reign Theme overviewPremiumGet Reign Theme →

Make it look right on phones

Section titled “Make it look right on phones”

You will end up with a header that fits a small screen: a logo that is easy to read, icons in the order you want, and a slide-out menu that looks right on phones and tablets. Phones and tablets have their own settings, separate from the desktop header.

Before you start

Section titled “Before you start”
  • Your main logo is set under Appearance > Customize > Site Identity.
  • Your menus are assigned. See set up your menus.
  • If you want a different logo on mobile, have the image file ready. A wide logo with text often looks cramped on a phone, so a simpler or square version can help.

Steps

Section titled “Steps”

Preview a phone-size screen

Section titled “Preview a phone-size screen”
  1. Go to Appearance > Customize.
  2. At the bottom of the left panel, select the phone icon. The preview now shows a phone-width screen. The tablet icon and desktop icon sit beside it.
  3. Keep this view open while you work through the steps below.

Change the mobile header

Section titled “Change the mobile header”
  1. Go to Appearance > Customize > Header > Mobile Menu.
  2. Choose Mobile Header Layout:
    • Layout One puts the icons in a second row under the logo.
    • Layout Two puts the icons in the same row as the logo. It is the default and saves vertical space.
    • Layout Three is a third arrangement. It is not offered when BuddyNext is active.
  3. To use a different logo on phones, switch on Use a Custom Mobile Logo, then upload your image in Mobile Logo.
  4. Use Logo Size to set the logo height on phones and tablets. It runs from 45 to 75 pixels.
  5. In Mobile Header Icons Options, drag icons into the order you want. This list is separate from the desktop one, so changing one does not change the other.
  6. For tablets, set Mobile Menu Width. This is how wide the slide-out menu is as a percentage of the screen, from 40% to 100%. It applies on screens 640 pixels wide and up. Phones always get a full-width menu. A value of 70% to 80% suits a short menu.
  7. Select Publish.

Which icons you can drag depends on your plugins. Cart appears with WooCommerce. Message and Notification appear with a community plugin. The light and dark switch can be added here too.

Check it worked

Section titled “Check it worked”
  1. Switch the Customizer preview between phone, tablet and desktop.
  2. Open your live site on a real phone. Narrowing a desktop window is close, but a real phone is better.
  3. Tap the menu button. The menu should open, show your mobile links, and close again.
  4. Log in and out to see both the member and visitor header.

If something looks wrong

Section titled “If something looks wrong”
  • The icons crowd the logo. Lower Logo Size, remove an icon from Mobile Header Icons Options, or try Layout One.
  • My mobile logo does not show. Switch on Use a Custom Mobile Logo and check Mobile Logo has an image.
  • The tablet menu is too wide. Lower Mobile Menu Width.
  • Desktop and phone icons differ. That is expected. Each has its own list.
Section titled “Related”