You can also customize the header specifically for mobile users. It gives you more control and especially helpful if a good chunk of your users is on mobile.
Navigate to your website admin, browse to Appearance > Customize > Header > Mobile Header.
Enabling the Custom Mobile Menu Text
To enable a custom text for the mobile menu, just click the checkbox next to “Enable Mobile Menu Text”.
Changing the Mobile Menu Text
The last setting would enable custom mobile menu text (this option). It would add an input box right below it, under the “Mobile Menu Text” label. Just enter the text of your choice and the text would display as the mobile “Menu” text.
Change the Text Color for the Mobile Menu Text
You may want to change the color of the “Menu” text, which is displayed to the mobile users.
It can be easily done, click over the “Select Color” button under the “Mobile Menu Text Color” label in the Mobile Header panel to choose the desired color.
Enable the Hamburger Icon
The hamburger icon is the three horizontal lines tiled vertically over each other. To enable it, click the checkbox next to “Enable Hamburger Icon” in the Mobile Header panel. You will see this icon next to the Menu text for the Mobile Menu.
Apply a Button Effect for the Hamburger
All these effects are displayed as you click over the hamburger icon, the screen animates to popup the menu at the left. During this transition, the hamburger icon transitions as well. These effects represent the changes to the hamburger icon itself.
- Shows an X sign instead of Hamburger icon.
- 3DX Reverse
- Shows an X sign in reverse
- Basically switching sides, the left X side shifts right and vice verse.
- 3DY Reverse
- 3DXY Reverse
- A left-facing arrow towards the actual menu.
- Arrow Reverse
- A right-facing arrow towards the Menu text.
- ArroWait Reverse
- Arrowturn Reverse
- Adds a smaller cross sign “x” instead of the hamburger icon.
- Collapse Reverse
- Transitions the hamburger icon to animate to become an “x” sign.
- The same transition is used to convert back to the hamburger icon as the menu is closed
- Elastic Reverse
- Convert the hamburger icon to a minus sign like so “-“.
- Slider Reverse
- The hamburger icons transitions while spinning into an “x” sign.
- Similar spinning transition is used to convert back to the original hamburger icon as the menu closes.
- Spin Reverse
- Spring Reverse
Change the Hamburger Icon Color
If you prefer, you can change the lines (hamburger icon) color to your liking.
Call it a button, icon, three lines, or simply hamburger. Changing the icon will provide a customized look to your design.
Simply click over “Select Color” under the “Hamburger Button Color” label in the Mobile Header panel to choose a color.
Choosing a Custom Logo for Tablets and Mobile
You can use a customized logo to display on mobile and tablets.
To upload the logo for use, simply click over “Select Image” button under the “Logo (optional)” label in Mobile Header panel to upload.