CSS help for better site

Opgelost Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 5 maanden geleden

Hello, I’m kind of in need for some help, I don’t know anything really about site building even on wordpress and this site that I’ve mentioned needs some upgrades. For startes I would like to know to connect the blue bar on the home page to the image above and below. I could also use some help with how to make the navigation bar more appealing for every kind of screen 🙂 I hope anyone can help me with this.

Best regards,
Luuk Hilderink

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

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

1 2 →

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

1 jaar, 5 maanden geleden

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

Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 5 maanden geleden

Ah mijn fout hahaha dacht dit is internationaal.

Moderator Jeroen Rotty
(@jeroenrotty)

Support Moderator

1 jaar, 5 maanden geleden

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?

Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 5 maanden geleden

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.
Guido
(@guido07111975)

1 jaar, 5 maanden geleden
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
Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 4 maanden geleden
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
Guido
(@guido07111975)

1 jaar, 4 maanden geleden
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
Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 4 maanden geleden

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

Guido
(@guido07111975)

1 jaar, 4 maanden geleden

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

Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 4 maanden geleden

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
Guido
(@guido07111975)

1 jaar, 4 maanden geleden
Hoi,

Voeg dit eens toe op pagina Extra CSS:
```
.main-navigation #toggle:focus + #toggle-menu {#94BCE4;}
```
Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 4 maanden geleden

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
Guido
(@guido07111975)

1 jaar, 4 maanden geleden
Wederom een foutje in mijn CSS, moet zijn:
```
.main-navigation #toggle:focus + #toggle-menu {background-color:#94BCE4;}
```
Thread starter Anonymous User 20655715
(@anonymized-20655715)

1 jaar, 4 maanden geleden

Yess, dat werkt. Heb je misschien ook nog een idee hoe ik dan alle items kan centreren?

Luuk
Guido
(@guido07111975)

1 jaar, 4 maanden geleden
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;}
```