header en navbar vastzetten geeft problemen

[MJGPN]

Beste forum leden,

Ik probeer al een tijdje mijn header en navigatiebar vast te zetten aan de bovenzijde van mijn webpagina. Nu is het mij gelukt om de footer vast te zetten en uiteindelijk ook de header met navigatiebar door de onderstaande code in mijn module Custom CSS te zetten.

/* fixednav*/
#sp-section-2 {

background-color: #007bff;
position: fixed;
top: 100px;
width: 100%;
z-index: 911;

}
/* fixedheader*/
#sp-section-1 {

height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 911;

}

Het levert echter het volgende probleem op: de page title blijft half er onder hangen. Iemand een idee hoe ik dit kan oplossen?

Alvast bedankt voor de hulp.

Gr. Marco

[Rondeb]

Hallo Marco,

heb je misschien een link naar je site?

In ieder geval moet je het blok van je titel laten zaken door middel van padding of margin.

Groeten Ron

[MJGPN]

De link naar de website is www.poecilia.nl

De code staat al niet meer in de css, dus de header en navbar staan niet meer vast. Ik merk dat als ik padding-top toevoeg dat ook effect heeft op de navbar? Die wordt ineens hoger. Misschien is de code die ik wil invoegen wel niet correct?

Gr. Marco

[Rondeb]

Hallo Marco,

in helix 3 heb je de optie Sticky Header heb je dat al geprobeerd?

sticky.jpg

Groeten Ron

[MJGPN]

Beste Ron,

Die optie had ik al geprobeerd, maar dat werkt op de één of andere manier niet. Daarom was ik blij dat het wel met de code lukte, alleen geeft dat weer andere problemen. Dus als je een oplossing hebt waarmee ik mijn header en navbar op de juist manier vast kan zetten dan hoor ik dat graag.

[Rondeb]

Die optie had ik al geprobeerd, maar dat werkt op de één of andere manier niet.

Wat gebeurt er dan als je hem inschakelt? Heb een aantal sites gemaakt met helix 3 en daar blijf het menu en het logo gewoon vast als de optie aanstaat.

Groeten Ron

[MJGPN]

Wat gebeurt er dan als je hem inschakelt?

Groeten Ron

Ik heb de optie "sticky header" nu op "yes" staan en zal dat even zo laten zodat je kunt zien dat die optie bij mij helemaal niet werkt.

[MJGPN]

Ik dacht dat ik het probleem zelf al had opgelost met onderstaande code, maar dat geeft weer problemen op mobiele telefoons. Er komt te veel ruimte tussen de header en de navbar.

/* fixednav*/
#sp-section-2 {

background-color: #007bff;
position: fixed;
top: 100px;
width: 100%;
z-index: 911;

}
/* fixedheader*/
#sp-section-1 {

height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 911;

}
/* title*/
#sp-title {

min-height: 0;
padding-top: 150px;

}

[Rondeb]

Hoi,

vreemd dat Sticky Header niet werkt!

Heb zojuist local op een test site even helix 3 geïnstalleerd en daar werkt het ook gewoon.

Dus ik vermoed dat je meer code in je .css hebt gezet wat nu roet in het eten gooit met Sticky Header.

Als ik jou was zou ik eens nagaan welke custom css je hebt toegevoegd.

Succes ermee.

Groeten Ron

[MJGPN]

Er staat heel veel code in mijn custom css, dus dat zou ook inderdaad het probleem kunnen zijn. Ik laat het voorlopig zoals het is, in principe werkt de code die er nu in staat.

Bedankt voor je hulp!