Je kent het wel. Je hebt een toffe website gemaakt met Elementor. De website is volledig responsive en je hebt gebruik gemaakt van de standaard Nav menu widget van Elementor Pro. De hamburger, ofwel de Toggle Button staat netjes rechts in het scherm, het logo van de klant staat links. Maar nu komt het, je opent het menu op je mobiel of tablet, en de tekst staat he-le-maal links uitgelijnd. Onhandig, aangezien bijna 90% van de mensen de telefoon met hun rechterhand vasthouden, en dus met hun rechterduim zullen navigeren.
Standaard zullen de navigatie items ‘links’ uitgelijnd zijn. In deze blog laat ik je zien hoe je door middel van een kleine CSS code de Elementor menu, de tekst centraal of rechts uitlijnen.
Geef het navigatie menu een CSS-class
Om de code specifiek voor het betreffende navigatie menu te laten werken zal je als eerste een koppeling moeten maken tussen de code en het navigatiemenu. Open de Elementor editor en selecteer de Nav Menu widget item. Klik op geavanceerd en scroll naar beneden. Je ziet daar onder het tabblad Lay-out het kopje CSS-classes. In het veld van de CSS-classes plaats je: center_dropdown_menu
Plaats de volgende CSS code
De eerste stap is afgerond, we hebben het navigatie menu een CSS-class gegeven. De volgende stap is een CSS-code toevoegen die daadwerkelijk zal werken voor het gekozen item. Ga even terug naar de je navigatie widget. Klik op het kopje geavanceerd en scroll naar beneden. Onder het tabblad Custom-CSS plaats je de volgende code:
.center_dropdown_menu nav ul a {
justify-content: center;
/* Align right */
/* justify-content: flex-end; */
}
Als je ‘center’ vervangt voor ‘right’ of ‘flex-end’ zal je zien dat de uitlijning rechts op het scherm zal zijn.
Het resultaat
Op het moment dat je de header of het template waarin je aan het werk bent update, zal de tekst voortaan ‘centraal’ of ‘rechts’ uitgelijnd zijn. Afhankelijk van wat je zelf gekozen hebt natuurlijk.
Lees ook:
- Gratis Elementor training voor beginners!
- Wat is verschil tussen Elementor en Elementor Pro?
- Volledig scherm scrollen in Elementor maken
