On mobile, your website shows a hamburger menu icon (the three lines that open your menu). If you’ve added a phone number to your contact bar, it also shows a phone icon. You can add a coloured box (background) behind these mobile menu icons, change its colour, or remove it completely. This guide shows you how to do all three in Change Design.
Change the box or background behind your mobile menu icons
Step 1: Open Change Design
Log in to your Dashboard and click Change Design in the top left corner.
Step 2: Go to Header & Menu
Click Header & Menu.
Step 3: Switch to Mobile view
At the top of this section, choose Mobile to see your mobile header settings.
Step 4: Add, change or remove the box
- To add a box: turn on Display a box behind the menu, then choose the box colour.
- To change the box colour: with the setting on, pick a new colour.
To remove the box: turn off Display a box behind the menu.
You can also change the colour of the icons themselves under Mobile menu icons.
Step 5: Save your changes
Click Close, then Save Changes. Check your mobile preview to see the new look.
Tips and things to watch out for
- Choose icon and box colours with good contrast. A light icon on a light box can be hard to see.
- If you remove the box, check the icons still stand out against your header or banner image. You may need to change the icon colour.
- These settings only affect mobile. Your desktop menu won’t change.
Frequently asked questions
Why is there a big coloured box behind my menu icon on mobile?
Display a box behind the menu is turned on. Turn it off in Change Design > Header & Menu > Mobile to remove it.
Can I change the colour of the hamburger menu icon?
Yes. In the same Mobile settings, use Mobile menu icons to choose the icon colour.
Why isn’t the phone icon showing on my mobile header?
The phone icon only appears if you’ve added a phone number to your contact bar.
Will this change my desktop menu?
No, these settings only apply to the mobile view.