Elementor menu, de tekst centraal of rechts uitlijnen

Elementor menu, de tekst centraal of rechts uitlijnen

In dit bericht:

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.

Uitlijnen-navigatie-menu-tekst-links-Elementor

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:

 

Rick Memelink

Rick Memelink

Rick is eigenaar van Websitetoday.nl. Hij ontwikkelt WordPress websites met Elementor en heeft een achtergrond als sportleraar. De afgelopen jaren heeft hij veel cursussen en trainingen gevolgd in online marketing, webdesign en ondernemen. De vreemde combinatie van sport, lesgeven en webdesign maakt dat Rick een bijzondere 'kijk' heeft ontwikkeld op het realiseren van een nieuwe websites voor jou!

Geef een antwoord

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