How to Update Mobile Menu Fonts & Colors in the Responsive Menu Plugin
In this tutorial, I will guide you through the process of updating the fonts and colors for your Mobile navigation using the Responsive Menu plugin.
NOTE: I recommend having the HEX values and font you want to use for your Mobile Menu saved and ready to access before beginning the tutorial.
Also, the steps below cover the settings for the Expandable Menu layout. If you are using the Simple Menu layout, simply skip the steps relating to the sub-navigation.
✱ Important ✱
Don’t forget to Save each layout as a new theme after making your changes if you have any intent on swapping layouts, as discussed in the tutorial on How to Set Up Your Navigation and Responsive Menu Plugin, otherwise, all customization will be lost.
1. Change Link Colors
In the sidebar, go to Responsive Menu > Menus > click on the Mobile Menu link. This will open the design interface specifically for the plugin.
Go to Menu Styling > expand Item Styling by clicking the plus icon > Top Level (blue tab) will be selected by default. Within the Item Styling section, look for and expand the sub-section labeled Text Color.
Copy the saved HEX values that you wish to change and paste them into the fields labeled: Normal, Hover, Active Item, and Active Item Hover. Make sure to include the # symbol at the start of the HEX code with no spaces between (this applies anytime you’re copying/pasting HEX codes).
Click the blue Update button to Save your changes.
Sub Navigation Link Colors
Still under Menu Styling > Item Styling. Click on the Sub Menu tab in green to make it active (this will change the Sub Menu tab to blue). Now look for and expand the sub-section labeled Text Color. Repeat the steps above copying and pasting your HEX values.
You should see your changes appear in the Preview on the right. Once you’re happy, click the blue Update button to Save your changes.
2. Change the Hamburger Button Color
Head back to the Main Menu by clicking the pink arrow at the top.
Select Mobile Menu > Toggle Button > expand the section labeled Button Type by clicking the plus icon > Hamburger (blue tab) will be selected by default.
Copy the saved HEX value that you wish to change and paste it into the field labeled: Line Active. You should see your changes appear in the Preview on the right.
Click the blue Update button to Save your changes.
3. Change Background Color
Head back to the Main Menu by clicking the pink arrow at the top.
Under Mobile Menu > select Container > expand the section labeled Appearance by clicking on the plus icon.
Copy the saved HEX value that you wish to change and paste it into the field labeled: Container Background. You should see your changes appear in the Preview on the right.
Click the blue Update button to Save your changes.
4. Change Fonts
Head back to the Main Menu by clicking the pink arrow at the top.
Menu Styling > expand Item Styling by clicking the plus icon > Top Level (tab is blue when selected). Within the Item Styling section, look for and expand the sub-section labeled Typography.
Find the field labeled Font Family. Highlight the text ‘Syne Regular’ between the quote marks and delete it, but keep the quote marks, and enter your new font family name. It is important that the name be in the proper format. You can Google for this information, check Google Fonts, or experiment with some trial and error.
Update the Font Fallback list to reflect either a serif or sans-serif font based on your new font selection. If you Google “CSS Font Fallbacks”, you will find commonly used options. While having a list of font fallbacks is recommended, it is not essential.
After the new font has been entered, adjust the font weight by changing the selection in the Font Weight dropdown box.
You should see your changes appear in the Preview on the right.
Sub Navigation Fonts
Still under Menu Styling > Item Styling > select the Sub Menu tab in green (this will change the tab to blue) and repeat all steps from above.
You should see your changes appear in the Preview on the right.
Once you’re happy, click the blue Update button to Save your changes.
5. Change Trigger Icon
NOTE: The Trigger Icon only pertains to the Expandable Menu layout. You can skip this step if using the Simple Menu layout.
Still under Menu Styling > look for and expand the section labeled Trigger Icon by clicking on the plus icon. The Text tab (blue tab) will be selected by default. Click on the Icon tab in green to make it active (this will change the Icon tab to blue).
Click within the Font Icon area to open up a menu of icon options. Once you’ve selected your new icon, hit the blue Select button to make it active. Repeat this step for the Active Font Icon.
You will need to hit the Update button to see your changes appear in the Preview on the right.
Trigger Icon Color
Still under Menu Styling > Trigger Icon > scroll down to the sub-section labeled Text Color and expand it by clicking the plus icon.
Copy the saved HEX values that you wish to change and paste them into the fields labeled: Normal, Hover, Active Item, and Active Item Hover. You should see your changes appear in the Preview on the right.
Click the blue Update button to Save your changes.
Pro Tip
A potentially faster way to change colors and fonts is to enter “color” or “font family” into the Search Bar within the design interface. That will highlight all fields that utilize color or fonts, respectively, allowing you to work your way through the list and make changes. That said, there are a lot of settings and options available to you in this plugin so I recommend following the above steps at least once to help familiarize yourself with the organization of the plugin settings.