logo verdwijnt bij scrollen

Ik heb eerder al eens een gelijkaardige vraag gesteld over het positioneren van een logo. Nu merk ik dat ik er misschien toch nog niet helemaal ben, het is nog niet wat het moet zijn.
Als je kijkt op de site: mozaiek.vrijzinnigwestvlaanderen.be dan staat het logo ok maar bij het scrollen verdwijnt het gedeeltelijk.
Hoe kan ik ervoor zorgen dat dit volledig zichtbaar blijft?

stond in mijn vraag
mozaiek.vrijzinnigwestvlaanderen.be

Het volgende in je custom.css plaatsen

.g-logo img {
width: auto;
height: 89px;
}

.g-logo {
position: absolute;
margin-top: -1% !important;
width: 200px;
}

dan is alles weer netjes

ok, maar dit verkleint het logo ook. De bedoeling is dat het logo zich spreidt over de header (het deel waar de menu staat) en de top-section (deel waar de iconen) staan. Zoals het logo nu staat is het prima maar het moet deze grootte behouden en volledig zichtbaar blijven bij het scrollen.

Zo dan!

.g-logo img {
width: auto;
padding-top: 50px;
}


element {
height: 137px;
margin: 0px;
}

De grijze balk is dan wat hoger en het logo past er dan precies in en bij scrollen valt het logo niet deels weg maar blijft geheel te zien en alles sluit netjes aan. zie bijlagen

Dankjewel. Dit had ik eerder ook al gevonden. Maar dan kreeg ik de reactie van iedereen dat de grijze balk niet zo breed mocht zijn.
Mocht dit echt niet lukken, dan zullen ze tevreden moeten zijn met het kleinere logo.

poging fixed zet de img vast, dat is denk ik de oplossing. Ik heb de top op 20px gezet om de uitgangspositie hetzelfde te laten zijn, maar je kunt ook de hoogte van het logo 20px hoger maken ( 157px exact) met wit ruimte

ok, maar dan schuift het logo over de tekst van de pagina. Het is steeds wel iets ...Op zich vind ik dat ik toch niet zoveel vraag en toch wil het maar niet lukken ...

Er zijn vele mogelijkheden zo je kan zien. Maar de grijze balk mag niet zo hoog en het logo is hoger van de grijze balk. Qua verhoudingen matcht het een niet met het ander dus. De template die je gekozen hebt dwingt nu eenmaal af dat bij omhoog scrollen de regel met nieuwsbrief en social media verdwijnt. Normaliter kan de dit in de instellingen vd template aanpassen (bv vastzetten), kijk daar eens naar. Of je laat die regel vervallen (heeft weinig nut zo) . Of je zet het logo onder de grijze balk. Of je schaft een template aan die je zelf helemaal kan configureren (bv YOOtheme Pro). Na je, zo maar wat opties. Iig met CSS kan het worden opgelost, dat heb je gezien maar dan zijn er weer andere dingen die niet of minder naar wens zijn. Succes, laat even weten wat je als oplossing gekozen hebt.

Klopt smirlala, maar het probleem ontstaat omdat het logo hoger is dan de header of menu balk. Dat gaat niet lukken met alleen CSS ben ik bang. Je zou het moeten proberen met javascript. Zoek eens met how to shrink img on scroll en je vind eigenlijk alleen oplossingen met javascript. Dan kun je het logo laten krimpen zodat deze exact in de header balk past. Sommige templates bieden die mogelijkheid. Stukje ingewikkelder dan CSS, maar wel mooier.