Menu mobile settings

Typically, horizontal navigation mens take up a lot of space in your website layout. On a wide computer screen with lots of room that is just fine, but on a smaller screen in another orientation (like a phone or tablet) your menu may not fit very well. This is where a special mobile menu comes in handy, like this example:

As you can see, a special button can be used to expand a slide-out menu from the side of the screen. (you can even change to the right side, and you can swipe to show/hide on touch screens) This slide-out menu is hidden from view until needed, and looks attractive in a ‘tall’ browser orientation like a phone or tablet.

Go to this area to control several aspects of this special menu button and slide out pane:

“ProPhoto > Customizer (toggle top-left switch to “Template”) > Menus > Mobile”

You may also want to select the top-level template along the top of your screen so the changes you make here are applied to all child templates in your design, shown as #3 in this screenshot:

Using the controls in this area, you can choose:

when this collapsed menu appears
(only smaller widths like phone and tablet, or always show)
whether swiping the screen will open the menu automatically or not
which smaller width should be the trigger point
(medium = phone widths, large = tablet widths)
which side of the screen the button and slide-out menu appear
(left or right side)
which image or tile is used for the button

Refer to this screenshot above as you work through the sections below:

Hide the wide horizontal menu

You can choose to hide your horizontal menu on smaller screens like narrow phones and tablets. To do this, edit your template (typically the top-level base template in your design) and click to modify your widget visibility. Click to hide your menu widget on smaller screens, like this shows:

Of course, if you select to show your mobile menu button on only the smallest medium (phone) width, you would not hide your horizontal menu at tablet widths. Simply coordinate which sizes should hide your menu with your mobile menu behavior, explained below.

For more information about hiding certain widgets or sections of your template at various widths, see our Responsive options overview guide for full details.

Choose a menu structure

If your site has one menu which includes all the navigation links your visitors need, you can simply select your menu structure in setting #1 seen in the image above. That menu will be used for the collapsed mobile menu. This is the easiest option because you have only one menu to manage!

But your template might split up your menu in two or more groups of links – for example, around a logo like the Morgan design example seen here:

In this case, you will probably have a separate menu structure which combines all those same links into one group. In this case, you’ll need to edit and update more than one menu structure to make changes, but you’ll select your one, unified menu structure here for your mobile visitors so they can link to all of your site content.

In any case, use this area to choose which menu structure is used for your slide out mobile menu.

When the mobile menu button is shown

Use setting #2 and setting #4 seen above to control when your site shows the mobile menu button & slide out pane. Together, you can use these settings to get the effect you want.

Always show

Always will of course show your button & slide out pane at all screen sizes, including computers. Typically, when this option is chosen, your template will not use a menu widget, since your links are shown when someone clicks the button to slide out your links. This is a great way to get a minimalist, uncluttered site design, but it does require users to add an extra click to navigate your site.

Only on small screens

Only on small screens will hide your mobile menu button when the browser is at or above a size you choose in setting #4, explained here:

medium – this option will show the menu at phone size only (767 pixels wide or less)
large – this option will show the menu at phone and tablet size only (991 pixels wide or less)

Since ProPhoto does not limit this strictly to phone and tablet devices, you will find that computers show the mobile menu at the widths chosen here, too. In fact, phones and tablets comprise lots of different screen resolutions, so you may find that some devices don’t show the mobile menu button when you might expect – like when turned sideways in landscape orientation where there is more width to display a horizontal menu.

Remember that you can hide a menu widget at one or more screen sizes using breakpoint hiding buttons.

Enable swipe to open

Left or right side

Mobile button image or tile

Use setting #6 to select an image or a ProPhoto tile design for the mobile menu button.

If you choose to upload an image, PNG format is suggested since it supports transparency for a more appealing look. The button appears persistently, so a completely opaque button may be a bad idea, since it will overlay and hide detail on your site as visitors scroll.

If you use a tile for your button, you have many more options, including layered images, shapes, text, animation & movement, and lots more. Learn much more in our Tiles guides. In fact, this very help website uses ProPhoto 6, so you can resize your browser right now to see an animated mobile menu button in action!

Other mobile menu appearance options

To control the look & style of the mobile menu pane, text links, expanding sub-menus, and lots more, check out the companion settings area here:

“ProPhoto > Customizer > Menus > Appearance”

Our separate Modify menu appearance guide explains these options.