Hi!
These are the Dutch WordPress.org forums, so here we communicate in Dutch. If you don’t speak Dutch, feel free to join the international forums at https://wordpress.org/support/
Hallo!
Dit zijn de Nederlandse forums van WordPress.org, dus de voertaal hier is Nederlands. Als je enkel Engels spreekt, dan ben je meer dan welkom op de internationale forums op https://wordpress.org/support.
Groet,
Jeroen
Ah mijn fout hahaha dacht dit is internationaal.
Wat wil je precies linken met elkaar? Ik zie 3 icoontjes in de blauwe balk, je kan gewoon op een image blok een link zetten zonder problemen. Of zie ik iets over het hoofd?
Ik wil graag dat de blauwe balk grenst aan de foto eronder, die van de natuur. En de navigatie balk op de laptop is opzich wel prima, maar op de telefoon wordt het een groen hamburger menu en ik zou dat ook graag willen aanpassen naar iets wat mooier staat.
Hoi Luuk,
Om de ruimte onder dat blok weg te halen, voeg dit eens toe op pagina Extra CSS van de Customizer:
.wp-container-7 {margin-bottom:0;}
Ik zie in mobiel scherm ook dat het telefoon icoon direct aansluit op de foto eronder. Dat kun je oplossen door:
.wp-container-7 .wp-block-columns .wp-block-column:last-child {margin-bottom:32px;}
Guido
Hallo,
Bedankt voor je hulp! De eerste werkt perfect, de tweede niet helemaal. Hij blijft gelegen aan de afbeelding eronder.
Heb je eventueel ook een idee hoe ik deze regel kan aanpassen zodat ik 88 pixel kan gebruiken voor laptop en 123 voor mobiel:
masthead {
height: 123px;
}
Ik heb zelf wat gekeken op w3schools maar kom er nog niet uit, het is lastiger dan ik had gedacht hahaha.
Met vriendelijke groet,
Luuk Hilderink
de tweede niet helemaal. Hij blijft gelegen aan de afbeelding eronder.
Foutje in mijn CSS, dit werkt wel:
.wp-container-7 .wp-block-column:last-child {margin-bottom:32px;}
Wat je #masthead betreft, ik zou zelf geen vaste hoogte daarvoor gebruiken omdat dit in verschillende schermgroottes ongewenste effecten kan veroorzaken. Zo hoort je mobiele menu binnen de #masthead te vallen, maar door de vaste hoogte staat deze nu door je headerafbeelding heen.
Guido
Ah ja, dat werkt heel goed. Ik heb ook de gefixeerde hoogte van de masthead weggehaald en dat zorgt er inderdaad voor dat het menu niet langer in de afbeelding valt! Heel erg bedankt daarvoor 🙂
En ook bedankt voor de hulp in het algemeen! Ik weet dat het relatieve simpele dingen zijn maar kwam er echt niet uit.
Luuk
Hoi Luuk
Graag gedaan hoor!
Wat me nog wel opvalt is dat in mobiel scherm het hamburger icoon rechts onder logo komt te staan, waardoor de #masthead vrij hoog wordt. Misschien kun je dat nog veranderen via de instellingen van je thema?
Guido
Ik heb wat veranderingen gemaakt aan het hamburger menu! Ziet er nu naar mijn smaak een stuk beter uit, nogmaals bedankt!
Heb het deze keer gedaan door online wat te kijken naar css, heb het hamburger menu nu gecentreerd en aan andere kleur gegeven maar de kleur is weer naar default als je erop klikt. Weet je hoe ik dat kan veranderen? w
Hoi,
Voeg dit eens toe op pagina Extra CSS:
.main-navigation #toggle:focus + #toggle-menu {#94BCE4;}
Hoi,
Werkt deels wel en deels niet. Nadat er op is geklikt wordt die alsnog groen, tenzij je ergens anders klikt dan blijkt dat die wel echt blauw is. Dat is een beetje hetzelfde als wat ik had gemaakt. Dat doet die verder ook als je terugklikt.
Luuk
Wederom een foutje in mijn CSS, moet zijn:
.main-navigation #toggle:focus + #toggle-menu {background-color:#94BCE4;}
Yess, dat werkt. Heb je misschien ook nog een idee hoe ik dan alle items kan centreren?
Luuk
Hoi,
Om gehele mobiele menu te centreren, voeg dit eens toe:
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {left:20px; right:20px;}
.mobile-nav-side .site-header #site-navigation.main-navigation {text-align:center;}
