Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. Customizing the Mobile Menu Style

Customizing the Mobile Menu Style

Navigate to your website admin, browse to Appearance > Customize > Header > Mobile Header > Mobile Menu.

You can choose from three given styles, named Sidebar, Drop Down, and Full Screen. Sidebar pop opens the menu section from either the left or right sides, depending upon the chosen direction.

Dropdown slides the menu from the top, extending the menu area to cover for displaying the menu. The full screen displays the menu items over a full-screen overlay.

To choose any of the given settings, just click on the dropdown under the “Mobile Menu Style” in Mobile Header panel.

Choose the Menu Direction

If you have chosen the default “Sidebar” option for the menu style, you can choose to edit its direction. To either display the menu at the left or the right.

For choosing directions, simply click over the Left or Right button provided under the Direction label in Mobile Header panel.

Enabling to Displace the Screen

When you click over the menu button, you can either to displace the screen or not. In simple words, enabling to either shift the screen enough to cover for the menu area. Otherwise, the menu appears over the screen without displacing it. 

Enable Close Menu Button

When you click the menu icon, it opens up the menu. The close menu button stays right at the top of the opened menu.

You can either enable it (checkmark) to display or keep the option unchecked to keep it from displaying. The checkbox is next to the “Enable Close Menu Button” label in the Mobile Header panel.

Entering the Full Icon Class for Custom Close Menu Button

You can enter the icon class in the input box under the “Custom Close Menu Button Icon Class” label to utilize it for the closing menu button on mobile. The button can be found at the top right side of the menu bar.

Change the Close Menu Button Text

You can change the text of the close menu button as well. Just type the new text in the input box under the “Close Menu Button Text” label in Mobile Header panel to change.

Change the Text Color of Close Button

You can assign any color of your choice. Just find the “Select Color” button under the “Close Button Text Color” label in Mobile Header panel to change.

Change the Text Color of Close Button on Hover

These minute changes may make big differences in your design and overall usability. With this option, you can change the color of the close button as you mouse over it.

Simply click over “Select Color” button under the “Close Button Text Hover Color” label in Mobile Header panel to change.

Change the Background Color of Close Button

It’s easy to use any color of your choice for the close button background. Under the label “Close Button Background Color”, there’s a “Select Color” button to click over to change the colors.

Change the Background Color of Close Button on Hover

Just like you can change the button text color on hover. Similar, you can change the background color on hover for the close button.

Click over “Select Color” button under the “Close Button Background Hover Color” label in Mobile Header panel to change it.

Choosing the Dropdown Target

There are two dropdown target options namely Icon and Link. You need to choose one out of these. By default, it’s placed to the icon.

Icon lets you browse through the dropdown, to see the links provided under a dropdown. So you can click over anyone it to browse through the link details (page).

In case of link, just the main dropdown is displayed. As you click over the dropdown, it doesn’t pop open the dropdown rather takes you to the linked page directly.

To choose either one of them, click over the respect button provided un the “Dropdown Target” label in Mobile Header panel.

Enable the Search within the Mobile Menu

If you want to give your mobile users a quick way to search, a good option would be to provide a search facility within the mobile menu. Using this option adds a search bar inside the mobile menu.

Just check the checkbox next to the “Enable Mobile Menu Search” label in the Mobile Header panel to enable it.

Enable the Custom Mobile Menu Breakpoint

Every screen is identified based on its pixel size, be it a smartphone, tablet, or a laptop. A custom mobile menu is served if a certain screen size breakpoint is detected.

Just click over the checkbox next to “Enable Custom Mobile Menu Breakpoint” to enable it.

Mobile Menu Appearance

With this option, you can define your own custom breakpoint in pixels. For example, you can choose to display the mobile menu when the screen size becomes 959px or larger by choosing “From 959px” option.

You can select one from these pre-defined breakpoints. This breakpoint works just like the example, except the pixel size is different

  • From 1280px
  • From 1080px
  • From 959px
  • From 767px
  • From 480px
  • From 320px
  • Custom Media Query
    • Choose this option if you want to use your custom media queries you have defined in CSS.

Just click over the dropdown under the “Mobile Menu Appearance” label in the Mobile Header panel to choose an option.

Styling: Mobile Menu

You can adjust the styling of the mobile menu in the following options.

Background Color

If you want to change the background color of the mobile menu, you can do so using this setting.

Simply click over “Select Color” button under the “Background Color” label in Mobile Header to change it.

Borders Color

Use this setting to change the border color of the mobile menu.

Simply click over “Select Color” button under the “Borders Color” label in Mobile Header to change it.

Links Text Color

If you want to change the text color of the links within the mobile menu, use this setting to do so.

Simply click over “Select Color” button under the “Links Text Color” label in Mobile Header to change it.

Links Text Color: Hover

You might as well want to change the link text color as you mouse over it, under the mobile menu.

To do so, just click over “Select Color” button under the “Links Text Color: Hover” label in Mobile Header to change it.

Dropdowns Menus: Background

The dropdowns background can be changed for the mobile menu as well.

Just click over “Select Color” button under the “Dropdowns Menus: Background” label in Mobile Header to change it.

Search bar Background

The search bar background can be changed using this setting. The effect will only be visible under the mobile menu.

Simply click over “Select Color” button under the “Search bar Background” label in Mobile Header to change it.

Search bar Color

Mostly search bars look the same in most business sites, except the different sizes and fonts. You can also adjust the search bar color to your liking.

Simply click over “Select Color” button under the “Search bar Color” label in Mobile Header to change it.

Search bar Border Color

The search bar border color can be changed to make it more standout or even to blend well with the design.

Simply click over “Select Color” button under the “Search bar Border Color” label in Mobile Header to change it.

Search bar Border Color: Focus

You can use this setting if you want to change the search bar border color only when you focus over it. Focus, in a technical context, means as soon as you place your cursor over the search bar input.

Simply click over “Select Color” button under the “Search bar Border Color: Focus” label in Mobile Header to change it.

Search bar Button Color

Most search bars have a button at its right, either in the shape of a button or an icon that enable users to search. You will see a “magnifying glass” as the default button search bar button.

Simply click over “Select Color” button under the “Search bar Button Color” label in Mobile Header to change its color.

Search bar Button Color: Hover

If you want the search bar button to only change when you mouse over it, you can use this setting to make this change.

Simply click over “Select Color” button under the “Search bar Button Color: Hover” label in Mobile Header to change it.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?