How Can We Help?
Search for answers or browse our knowledge base.
Mobile Menu
Navigate to Appearance > Customize > Header > Mobile Menu to style the mobile view of your site navigation.
- Breakpoints: Choose the media query where you want to display the mobile menu.
![Breakpoint setting | Imagely Breakpoint setting](https://members.photocrati.com/wp-content/uploads/2020/10/image-49.png)
![Available breakpoints | Imagely Available breakpoints](https://members.photocrati.com/wp-content/uploads/2020/10/image-50.png)
- Height (px): You can adjust the location of the mobile menu taking into consideration the top of the page.
![Height pixels Mobile menu | Imagely Height pixels Mobile menu](https://members.photocrati.com/wp-content/uploads/2020/10/image-53.png)
- Mobile Menu Style: Sidebarm, Drop Down, and Full screen.
![Drop down Mobile menu style. | Imagely Drop down Mobile menu style.](https://members.photocrati.com/wp-content/uploads/2020/10/image-55.png)
- Display menu text: it shows the text beside the menu icon.
- Menu text: The text that you want to include.
![Drop down menu text for mobile devices | Imagely Drop down menu text for mobile devices](https://members.photocrati.com/wp-content/uploads/2020/10/image-54.png)
- Close Menu Text (available with the Dropdown style)
![Dropdown style, includes an option to add a label to the close icon. | Imagely Dropdown style, includes an option to add a label to the close icon.](https://members.photocrati.com/wp-content/uploads/2020/10/image-58.png)
- Hamburger Icon Class: Enter the full icon class. You can adjust the class that you will use as your hamburger menu on mobile devices.
- Custom Hamburger Button: Once the menu is open, it will replace the hamburger icon with the one you choose here.
- Custom Hamburger Button: Color. You can adjust the color of the hamburger icon used to open the mobile menu.
![Setting use to adjus the class and icon used in the hamburger menu for mobile devices. | Imagely Setting use to adjus the class and icon used in the hamburger menu for mobile devices.](https://members.photocrati.com/wp-content/uploads/2020/10/image-57.png)
- Drop Down Max Height (px): Add the height from which you want to display the scrollbar in the dropdown.
Note: This option is available only on the Dropdown menu style.
![Drop down menu height setting | Imagely Drop down menu height setting](https://members.photocrati.com/wp-content/uploads/2020/10/image-59.png)
![Search option on mobile screenshot | Imagely Search option on mobile screenshot](https://members.photocrati.com/wp-content/uploads/2020/10/image-61.png)
- Direction (sidebar style): adjust the location of the sidebar style menu on mobile devices.
![Direction setting for the sidebar, right or left. | Imagely Direction setting for the sidebar, right or left.](https://members.photocrati.com/wp-content/uploads/2020/10/image-62.png)
- Displace (sidebar style): Displace the background underneath the overlay instead of covering the page with the sidebar menu.
![Option to displace the sidebar | Imagely Option to displace the sidebar](https://members.photocrati.com/wp-content/uploads/2020/10/image-63.png)
- Close Menu Button: Makes the close button visible.
![Enable the close menu button. | Imagely Enable the close menu button.](https://members.photocrati.com/wp-content/uploads/2020/10/image-64.png)
- Close Menu Button Icon Class: You can adjust the CSS class being used by the close icon.
- Close Menu Button Text: You can change the label used for the Close Button.
![Settings use to change the CSS class for the Close button. | Imagely Settings use to change the CSS class for the Close button.](https://members.photocrati.com/wp-content/uploads/2020/10/image-65.png)
- Dropdown Target: Chose to use an icon or the complete link to open sub-menus.
![You can use two different targets, icon or link | Imagely You can use two different targets, icon or link](https://members.photocrati.com/wp-content/uploads/2020/10/image-66.png)
- Mobile Menu Search: Enable the search option on mobile.
![Search option on mobile | Imagely Search option on mobile](https://members.photocrati.com/wp-content/uploads/2020/10/image-60.png)
- Mobile Menu Colors: Adjust the colors of the mobile menu, we have many options:
- Close Button Background.
- Background Color.
- Borders Color.
- Links Color.
- Links Color Hover.
- Dropdowns Menus: Background.
- Searchbar Background.
- Searchbar Color.
- Search Border Color.
- Searchbar Button Color.
- Searchbar Button Color: Hover.
![Different options and settings to adjust the color of the mobile menu. | Imagely Different options and settings to adjust the color of the mobile menu.](https://members.photocrati.com/wp-content/uploads/2020/10/image-67.png)
- Mobile Menu Fonts:
- Font Family.
- Font Style.
- Text Transform.
- Font Size.
- Line Height.
- Letter Spacing (px).
![Different font families and settings for the mobile menu. | Imagely Different font families and settings for the mobile menu.](https://members.photocrati.com/wp-content/uploads/2020/10/image-68.png)