1. smirlala
  2. Templates
  3. vrijdag 15 mei 2020
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?
Geaccepteerde antwoord
Geaccepteerde antwoord Pending Moderation
Ok, het logo mag niet kleiner en de balk niet hoger. Dan is dit nog een mogelijkheid:
#g-header {
margin-top: 40px !important;}
  1. 2 weken geleden
  2. Templates
  3. # Permalink
Geaccepteerde antwoord Pending Moderation
  1. 2 weken geleden
  2. Templates
  3. # 1
Geaccepteerde antwoord Pending Moderation
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
JUG010 member, organisator JUG010-events
Eigen site: https://www.ifred.nl
  1. 2 weken geleden
  2. Templates
  3. # 2
Geaccepteerde antwoord Pending Moderation
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.
  1. 2 weken geleden
  2. Templates
  3. # 3
Geaccepteerde antwoord Pending Moderation
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
Bijlagen
JUG010 member, organisator JUG010-events
Eigen site: https://www.ifred.nl
  1. 2 weken geleden
  2. Templates
  3. # 4
Geaccepteerde antwoord Pending Moderation
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.
  1. 2 weken geleden
  2. Templates
  3. # 5
Geaccepteerde antwoord Pending Moderation
poging

.g-logo img {
width: inherit;
position: fixed;
top: 20px;
}

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
  1. 2 weken geleden
  2. Templates
  3. # 6
Geaccepteerde antwoord Pending Moderation
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 ...
  1. 2 weken geleden
  2. Templates
  3. # 7
Geaccepteerde antwoord Pending Moderation
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.
JUG010 member, organisator JUG010-events
Eigen site: https://www.ifred.nl
  1. 2 weken geleden
  2. Templates
  3. # 8
Geaccepteerde antwoord Pending Moderation
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.
  1. 2 weken geleden
  2. Templates
  3. # 9
Geaccepteerde antwoord Pending Moderation
Hoi Wim,

Deze oplossing heb ik hierboven al (middels css) gegeven maar het is niet de wens om het logo iets kleiner te maken, anders waren we er al uit.
JUG010 member, organisator JUG010-events
Eigen site: https://www.ifred.nl
  1. 2 weken geleden
  2. Templates
  3. # 10
Geaccepteerde antwoord Pending Moderation
Eerst wil ik jullie bedanken voor alle aandacht die jullie geven aan deze topic. Dit wordt enorm geapprecieerd. :)
De laatste reactie van Wim heb ik nu ook toegepast en dit volstaat nu wel.
Nogmaals van harte dank!
  1. 2 weken geleden
  2. Templates
  3. # 11
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
Wees een van de eersten om op dit bericht te reageren!