In dit artikel laat ik je zien hoe je eenvoudig de (slag)schaduw (drop shadow) onder het Divi menu verwijdert. Standaard heeft het Divi menu een lichte lijn over de hele breedte lopen. Wanneer je naar beneden scrolt dan blijft bij vaste navigatie een schaduw zichtbaar over je webpagina.
Bij een donkere achtergrond is dit nauwelijks zichtbaar. Het kan het niet worden verwijderd met de standaard Divi-thema instellingen. Als deze lijn en schaduw in jouw ontwerp niet nodig is, dan is een klein beetje CSS nodig om dit te verwijderen. Daarnaast beschrijf ik hieronder nog een manier waardoor deze lijn en schaduw niet wordt getoond. Plus een bonustip.
Lijn en schaduw onder Divi menu verwijderen met CSS
Open Divi Thema Opties
Ga in je WordPress-dashboard naar Divi > Thema Opties > Aangepaste CSS.
Voeg de volgende CSS-code toe:
/* verwijdert de lijn en slagschaduw onder het menu */
#main-header, #main-header.et-fixed-header {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
Sla de wijzigingen op en laad de pagina opnieuw. De lijn en slagschaduw zijn nu niet meer zichtbaar.
Voeg een eigen opgemaakt menu toe via Divi Thema Builder
Zodra je gebruik maakt van de Divi Theme Builder en je een eigen menu opmaakt, verdwijnen de lijn en (slag)schaduw.
Open de Thema Builder in Divi > Thema Builder.
Kies een ‘Globale kop toevoegen’
Selecteer ‘Build Global Header’
Voeg een nieuwe sectie en rij toe
Klik op het + icoon en voeg het menu module toe aan de rij
Met behulp van Divi Thema Builder style je specifieke menu’s voor je gehele website en/of voor bepaalde webpagina’s afzonderlijk.
Bonus: Voeg eigen lijn toe aan je Divi menu
Het is eenvoudig om een eigen lijn (border) in je favoriete kleur toe te voegen direct onder het menu. De lijn en schaduw kun je behouden bij een donkere kleur, anders weet je nu hoe je dit verwijdert. Ook hier heb je een klein beetje code nodig. Dit zijn de stappen:
Activeer je webpagina met Visual Builder
Ga naar ‘Sectie-instellingen’ van de bovenste sectie op je webpagina
Klik vervolgens op tabblad ‘Geavanceerd’
Scrol naar ‘Aangepaste CSS’ en klik tabblad ‘Module-elementen’ aan
Voeg bij ‘Hoofdelement’ deze toe:
border-top: 6px solid #000000;
Pas het aantal pixels (6px) en kleur (#000000) aan naar de waarden die jij wilt tonen.
Dit kleine beetje code kun je ook gebruiken voor scheidingen tussen secties waar dan ook op je pagina. Bijvoorbeeld ter vervaging van de verdeler (divider) module. Ik benieuwd naar jouw ervaringen.
0 reacties