Footer menu gelijk aan top menu

Opgelost MaritvanS
(@maritvans)

8 jaren, 5 maanden geleden

Voor mijn website maak ik gebruik van SG Circus, een child theme van SG Window.

Ik vond de standaard footer informatie overbodig, dus heb deze aangepast naar mijn wensen. Het enige wat ik niet voor elkaar krijg, is de opmaak van het footer menu gelijk maken aan die van het top menu (Home, Over mij, Contact en de taalknoppen).

Hoe kan ik dit het eenvoudigst oplossen? Ik vermoed zelf dat ik ergens in een css file een menu verwijzing moet aanpassen, maar kan niet vinden waar en wat.

Alvast bedankt!
Marit

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

Axel13
(@axel13)

8 jaren, 5 maanden geleden
Hoi MaritvanS,

Je kunt daarvoor het best naar de “class” en/of “id” kijken in het bovenste menu en de eigenschappen/instellingen kopiëren naar de “class”/”id” in het onderste menu.

In je stylesheet wordt class weergegeven met een puntje voor de class naam. Id heeft een #.
Bv.
.site-info = class=”site-info”
#footer-navigation = id=”footer-navigation”

Dit gezegd kun je in de CSS het volgende zoeken:
```
.site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
    color: #ffffff;
}
```
en aanpassen naar:
```
.site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}
```
Dit past het menu aan, maar enkel als je er niet met de cursor over gaat.
Om de stijl bij aanwijzing aan te passen heb je een class of id nodig die eindigt met “:hover”.

In het bovenste menu is dit:
```
.site #footer-navigation .horisontal-navigation a:hover, .site .horisontal-navigation li ul li a:hover, .site .horisontal-navigation li ul li a:focus, .site .horisontal-navigation li a:hover, .site .horisontal-navigation li a:focus {
    color: rgb(245,245,245);
    cursor: pointer;
    border-radius: 3px;
    background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
    box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
    text-shadow: 0 -1px rgba(0,0,0,.1);
    text-decoration: none;
    text-decoration: underline;
}
```
Het onderste menu gebruikt de algemene instellingen voor de site. Om dit aan te passen kun je zelf een hover class toevoegen aan de CSS en de eigenschappen kopiëren.

Dat wordt dan:
```
.site-info a:hover {
    color: rgb(245,245,245);
    cursor: pointer;
    border-radius: 3px;
    background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
    box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
    text-shadow: 0 -1px rgba(0,0,0,.1);
    text-decoration: none;
    text-decoration: underline;
}
```
Er is dan weliswaar nog wat te weinig ruimte rond de tekst, zodat de knoppen niet even groot zijn als die in het bovenste menu. Dit kun je verhelpen door “padding” toe te voegen.

Dit doe je weliswaar best bij de gewone weergave (dus niet :hover), omdat de tekst anders een beetje zal verspringen.

Dus die eerste code wordt dan:
```
.site-info, .site-info a, #footer-navigation .horisontal-navigation li a {
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px;
}
```
Let wel: aanpassingen die je in de CSS van je template maakt gaan bij updates verloren. Je kunt dan beter een Custom CSS plugin gebruiken, zoals de Custom CSS module in Jetpack of bv. Simple Custom CSS.

Succes ermee!
Thread starter MaritvanS
(@maritvans)

8 jaren, 4 maanden geleden

Ik heb het gevonden! Dank je wel 🙂
Het enige waar ik nu nog tegen aan loop, is dat de Contact Me knop in de footer standaard een knop is en geen link.

Heb je hier misschien een idee voor?

Thread starter MaritvanS
(@maritvans)

8 jaren, 2 maanden geleden

Ik heb nog steeds het probleem dat in het footer menu de “Contact me” link standaard knop is, waar de overige twee normale links zijn. Ik kan nergens vinden waarom Contact me een knop is. Kan iemand me hiermee op weg helpen?
Axel13
(@axel13)

8 jaren, 2 maanden geleden
Hoi MaritvanS,

Deze CSS in /wp-content/themes/sg-window/css/scheme-0.css is daar verantwoordelijk voor:
```
.site .site-info a:nth-child(2) {
    color: rgb(245,245,245);
    border: none;
    border-radius: 3px;
    background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
    box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
    display: inline-block;
    outline: none;
    padding: 4px;
    text-shadow: 0 -1px rgba(0,0,0,.1);
    text-decoration: none;
    user-select: none;
}
```
Als je aanpassingen maakt in je theme kun je dit wissen, als je een child theme of CSS plugin gebruikt, kun je volgende toevoegen:
```
.site .site-info a:nth-child(2) {
    background: none;
    box-shadow: none;
    padding: 0;
    text-shadow: none;
    text-decoration: underline;
}
```
Thread starter MaritvanS
(@maritvans)

8 jaren, 2 maanden geleden

Axel13, thank you SO MUCH! It worked! 😀

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)

Het onderwerp ‘Footer menu gelijk aan top menu’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven