Probleem

Op een mobiele telefoon ontbreken het hamburgermenu (de drie streepjes die het menu openen) en het winkelwagen-icoon bovenaan je website. De iconen staan er nog wel en ze werken ook, maar ze hebben dezelfde kleur als de balk erachter, waardoor je ze niet ziet.

Oorzaak

Dit begint meestal wanneer je de kleuren van je template aanpast. Door zo'n wijziging kan de achtergrond van de mobiele headerbalk bijna dezelfde kleur krijgen als de iconen van de winkelwagen en het hamburgermenu, en dan vallen de iconen weg tegen de balk. Er is niets kapot en er ontbreekt niets: de iconen staan er nog en werken gewoon, je ziet ze alleen niet.

Oplossing

Geef de mobiele headerbalk een eigen achtergrondkleur met een klein stukje aangepaste website-inhoud.

1. Open je winkel in ShopFactory.
2. Klik op de vervolgkeuzelijst Centrale -> Extra Website Tekstgebieden.
3. Klik op de knop + (Toevoegen) om een nieuw aangepast HTML-blok toe te voegen in websitegebied 1.
4. Sleep het tekstblok in de beschrijvingssectie.
5. Klik rechtsboven in je nieuwe tekstblok (HC1 of HC2, afhankelijk van hoeveel blokken je al hebt) op het EDIT-icoon (potlood).
6. Wijzig de HTML-identificatienaam in: Mobile header background
7. Kopieer en plak deze code in het inhoudsvenster:

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

8. Vervang #747570 door de hexcode van de kleur die je de balk wilt geven. Kies een kleur die verschilt van de iconen, bijvoorbeeld de kleur die je elders in je header gebruikt.
9. Klik op OK en daarna op Voltooien.
10. Sla je winkel op en bekijk een voorbeeld in een externe browser, op een telefoon of in de telefoonweergave van je browser.
11. Publiceer je winkel opnieuw zodat de wijziging online komt.

Opmerkingen

• Laat je telefoon nog de oude kleur zien, ververs dan de pagina of wis de cache van je browser. Een gepubliceerde wijziging kan een paar minuten nodig hebben.
• Hetzelfde blok bepaalt ook de kleur van de mobiele headerbalk in het algemeen, dus je kunt het ook gebruiken om de mobiele header precies dezelfde kleur te geven als de desktopversie van je website.

Gerelateerde artikelen

• Tekstkleur wit op wit of zwart op zwart wijzigen (onderdeel E gaat over de mobiele logobalk)
• Aangepaste HTML-code toevoegen aan een pagina of aan de hele website