Misschien een wat vreemde vraag: is jouw top bar zichtbaar op mobiele telefoons? Maar een vraag die jammergenoeg vaak met nee beantwoord wordt. Op verzoek van Leen van Domaine Las Brugues, voegde ik een top bar toe aan de website van deze mooie accommodatie. Voor mij een eerste keer en ik ontdekte iets heel vreemds; de top bar verdwijnt op een mobiele telefoon. Hoe je een top bar zichtbaar op mobiele telefoons maakt, lees je in deze Buro RaDer Tips & tricks.

Wat is een top bar?

Waarschijnlijk zag je het al eens. Zo’n gekleurde balk bovenaan een website, met daarin een aantal icoontjes, een telefoonnummer of zelfs een klikbare call-to-action. Zo’n balk, dat is nu een top bar. Superhandig, want zo hebben websitebezoekers altijd jouw gegevens in beeld en kunnen zij je met één muisklik of vingerklik bereiken.

Maar is dat wel zo?

Leen stuurde mee voorbeeld en ik ging aan de slag. Het toevoegen van de top bar was een fluitje van een cent in het door mij gebruikte Divi thema. En het zag er op de desktop ook mooi uit. Maar toen ik de wijziging op mijn mobiele telefoon ging testen, was de top bar niet meer zichtbaar. De 3 icoontjes waren opgenomen in het hamburgermenu, welke gebruikt wordt voor de navigatie op mobiele telefoons. Niet handig, want het idee van de top bar is dat bezoekers snel contact kunnen opnemen. En dat geldt destemeer voor de bezoekers die de website met een mobiele telefoon bekijken!

Standaardgedrag

Toen ik de website bezocht die Leen mij als voorbeeld had gestuurd, bleek de top bar van die website ook te verdwijnen op mobiele telefoons. En ook op een aantal andere websites met top bars die ik testte, bleek de top bar op mobiele telefoons te worden opgenomen in het hamburgermenu.

Eenvoudige oplossing voor top bar op mobiele telefoons

Om de top bar wel te tonen en niet in het hamburgermenu te laten verdwijnen, moest ik wat eenvoudige CSS code aan de website toevoegen.

Deze:

@media (max-width: 980px) {
#top-header, div#et-secondary-menu, ul#et-secondary-nav {
display: block !important;
}
#top-header .container {
padding-top: 0.75em !important;
}
}

en deze:

@media (max-width: 980px) {
#main-header {
margin-top: 40px !important;
}
}

Hulp nodig om top bar zichtbaar op mobiele telefoons te maken?

Heb je een top bar die niet zichtbaar is op mobiele telefoons, maar je wilt niet zelf aan de CSS code van je website komen? Neem dan contact met me op. Ik help je graag!

Met regelmaat plaats ik Blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.