Symptom

On a mobile phone the hamburger menu (the three lines that open the menu) and the shopping cart icon are missing from the top of your website. The icons are still there and they still work, but they are drawn in the same colour as the bar behind them, so you cannot see them.

Cause

This usually starts when you edit the colours of your template. A change can leave the background of the mobile header bar close to the colour of the cart and hamburger icons themselves, and the icons then blend into the bar. Nothing is broken and nothing is missing: the icons are still on the page and they still work, you just cannot see them.

Solution

Give the mobile header bar its own background colour with a small piece of custom website content.

1. Open your shop in ShopFactory.
2. Click the Central dropdown button -> Custom Website contents.
3. Click the + (Add) button to add a new custom HTML block in website area 1.
4. Drag the text block content into the description section.
5. On the top right of your new text block (HC1 or HC2, depending on how many custom blocks you already have), click the EDIT (pencil) icon.
6. Change the HTML Identification name to: Mobile header background
7. Copy and paste this code into the content window:

<style>
.ThemeVersion-11 .header.mobile .utils {
background: #747570;
}
</style>

8. Replace #747570 with the hash code of the colour you want the bar to be. Choose a colour that differs from the icons, for example the colour you use elsewhere in your header.
9. Click OK, then click Finish.
10. Save your shop and preview it in an external browser, on a phone or in the phone view of your desktop browser.
11. Publish your shop again so the change goes online.

Notes

• If your phone still shows the old colour, refresh the page or clear the browser cache. A published change can take a few minutes to appear.
• The same block sets the colour of the mobile header bar in general, so you can also use it to give the mobile header exactly the same colour as the desktop version of your website.

Related articles

• Changing text color being white on white background or black on black background (section E covers the mobile company logo bar)
• Adding custom HTML code to a Page or to the entire website