UA-2131491-6

Leesvoer - oftewel ons blog

Top bar Domaine Las Brugues op desktop computer

Is jouw top bar wel zichtbaar op een mobiele telefoon?

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.

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 telefoon

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?

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 korte Tips & tricks. Wil je mijn tips en blog niet missen? Schrijf je in voor mijn nieuwsbrief.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *