Theme Venture menu collant

[chill75]

Bonjour

j'utilise actuellement le thème gratuit Venture, et je voulais savoir si il était possible de mettre le menu du haut "collant" pour mobile

si quelqu'un sais comment faire ?

merci d'avance

[Dgeodev]

Hello, 

Je vous propose une solution en CSS.

Cependant je vous invite à faire une copie de votre thème avant toute intervention - Boutique en ligne - Actions - Dupliquer le thème - comme cela en cas de soucis vous pourrez revenir à cette version non modifiée.

Rendez-vous dans Boutique en ligne - Actions - Modifier le code - Ouvrez le dossier Assets et trouvez le fichier theme.scss.liquid 

Mettez vous tout en bas du fichier et copiez/collez le code suivant: 

@media only screen and (max-width: 750px) {
	body {
		padding-top:62px !important;
	}
	.site-header {
		position:fixed;
		top:0;
		z-index:1;
	}
}

Adaptez le 62px à la hauteur en pixel de votre header en mobile. Si vous ne la connaissez pas adaptez au pif jusqu'à trouver le bon décalage. 

Je rappelle que de passer le menu en fixed va mettre vos header par dessus les éléments il faut donc mettre ce padding-top sur le body pour reproduire cet espacement. 

Cela pourrait être calculé automatiquement en Javascript mais cette solution serait plus complexe.

Bon courage et bonne année 🙂

[Dgeodev]

Hello, 

Je vous propose une solution en CSS.

Cependant je vous invite à faire une copie de votre thème avant toute intervention - Boutique en ligne - Actions - Dupliquer le thème - comme cela en cas de soucis vous pourrez revenir à cette version non modifiée.

Rendez-vous dans Boutique en ligne - Actions - Modifier le code - Ouvrez le dossier Assets et trouvez le fichier theme.scss.liquid 

Mettez vous tout en bas du fichier et copiez/collez le code suivant: 

@media only screen and (max-width: 750px) {
	body {
		padding-top:62px !important;
	}
	.site-header {
		position:fixed;
		top:0;
		z-index:1;
	}
}

Adaptez le 62px à la hauteur en pixel de votre header en mobile. Si vous ne la connaissez pas adaptez au pif jusqu'à trouver le bon décalage. 

Je rappelle que de passer le menu en fixed va mettre vos header par dessus les éléments il faut donc mettre ce padding-top sur le body pour reproduire cet espacement. 

Cela pourrait être calculé automatiquement en Javascript mais cette solution serait plus complexe.

Bon courage et bonne année 🙂

[Dgeodev]

Hello, 

Je vous propose une solution en CSS.

Cependant je vous invite à faire une copie de votre thème avant toute intervention - Boutique en ligne - Actions - Dupliquer le thème - comme cela en cas de soucis vous pourrez revenir à cette version non modifiée.

Rendez-vous dans Boutique en ligne - Actions - Modifier le code - Ouvrez le dossier Assets et trouvez le fichier theme.scss.liquid 

Mettez vous tout en bas du fichier et copiez/collez le code suivant: 

@media only screen and (max-width: 750px) {
	body {
		padding-top:62px !important;
	}
	.site-header {
		position:fixed;
		top:0;
		z-index:1;
	}
}

Adaptez le 62px à la hauteur en pixel de votre header en mobile. Si vous ne la connaissez pas adaptez au pif jusqu'à trouver le bon décalage. 

Je rappelle que de passer le menu en fixed va mettre vos header par dessus les éléments il faut donc mettre ce padding-top sur le body pour reproduire cet espacement. 

Cela pourrait être calculé automatiquement en Javascript mais cette solution serait plus complexe.

Bon courage et bonne année 🙂