Fixer le header

[iaction83]

Bonjour à tous,

Je souhaiterais figer mon header afin que même en cas de scroll ce dernier reste bloquer en haut.
J'ai essayé avec la position:fixed mais cela ne fonctionne pas.
Avez vous une petite idée ?
Voici le site en construction : action24-24.fr

Merci

[cavo789]

Re : Fixer le header

Bonjour

Hier Yann (Daneel) a mentionné le projet Headroom (http://wicky.nillia.ms/headroom.js/).

Jete-y un coup d'oeil.

[iaction83]

Re : Fixer le header

Super, je vais voir ce que je peux faire ou plutôt ce que j'arrive à faire lol

Merci

[manu93fr]

Re : Fixer le header

Bonjour,
je ne ferai pas ça mais plutot tenté de fixé le menu au scroll plutot ...

Ensuite, tu ne l'as peut etre pas vu mais il y a un gros soucis de largeur sur ton site .... tu ne vois pas l'ascenseur horizontal qui ne devrait pas etre là ? Le soucis vient de ton dernier icone "recherche de fuite" qui déborde !

Et puis, etant donné que tu utilises Google analytics qui "trace" les visiteurs (même en anonyme), l'avertissement des cookies serait plus que conseillé

[iaction83]

Re : Fixer le header

Bonjour,
je ne ferai pas ça mais plutot tenté de fixé le menu au scroll plutot ...

Ensuite, tu ne l'as peut etre pas vu mais il y a un gros soucis de largeur sur ton site .... tu ne vois pas l'ascenseur horizontal qui ne devrait pas etre là ? Et puis, etant donné que tu utilises Google analytics qui "trace" les visiteurs (même en anonyme), l'avertissement des cookies serait plus que conseillé

Bonjour,

Si si, j'ai bien vu la largeur du site mais je ne sais pas comment régler ca. (je débute avec la création de site)
Je n'avais pas penser à avertir les internautes... merci pour le conseil

[daneel]

Re : Fixer le header

Bonjour,

Si je ne trompe pas, on peut simplement utiliser la position sticky, j'ajouterai dans le fichier css du template :

/templates/construction/css/style.css

header {position: -webkit-sticky;position: sticky; top: 0; z-index: 1020;}

Pour les navigateurs qui ne supportent pas la position sticky, on peut ajouter un polyfill en js :

https://github.com/wilddeer/stickyfill

Perso, j'ai utilisé pendant un moment le script Sticky Plugin d'Anthony Garand ( http://stickyjs.com/ ) car inclus dans le template helix3 (c'est ma base de travail). Je l'ai remplacé par headroom.js pour gagner en lisibilité au scroll.

Mais le mieux, c'est de faire simple et corriger prioritairement les erreurs comme l'indique manu93fr

Dans le cas présent, les images posent problème car leur taille n'est pas gérée selon la largeur de l'écran.
un simple "max-width" doit pouvoir corriger cela.

il faut également ajouter dans la css....

.logo img, .social img {max-width:100%;}

Bon courage !

Yann