Fixer un menu sur un site WEB Format Mobile

Version imprimable

01/09/2021, 14h21
Gilles_75

2 pièce(s) jointe(s)

Fixer un menu sur un site WEB Format Mobile

Bonjour

J'ai un souci concernant un site web
Un freelance c'était occupé de la programmation PHP mais il n'est plus dispo.
Il s'agit de ce site.

https://guideyourtrip.com/

Comment faire pour garder le menu du haut toujours présent quand on scroll sa page vers le bas ?
Cela fonctionne au format horizontal sur Desktop et Tablet mais pas au format Mobile.
J'ai constaté aussi que sur Tablet au format Horizontal le champ "Rechercher" ne restait pas sur la même ligne ( voir photo )
Il semble que tout soit gérer dans un fichier php header.php ( voir pj )

Merci pour votre aide

Bonjour,

Pour ce qui est de rendre la navigation fixe, c'est du côté du CSS qu'il faut se tourner.
On peut voir que dans votre fichier https://guideyourtrip.com/wp-content...Divi/style.css il est écrit :
Code:

1 2 3 4 5 @media (max-width: 980px) { .et_fixed_nav #main-header, .et_fixed_nav #top-header, .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header { position: absolute; } }
Pour que le menu soit fixe, il faut alors mettre position: fixed;.
Il est donc possible d'aller modifier directement ce fichier mais vu qu'il est minifié c'est peut-être compliqué d'aller retrouver cette référence.
Donc soit vous pouvez

soit passer par les fichiers sources et les recompiler (si c'est le système utilisé et que vous savez le faire)
soit, et c'est le plus simple, créer un nouveau fichier CSS et l'inclure après afin d'écraser des déclarations (ou même, encore plus simple, créer une balise <style></style> à mettre dans <head></head>)

En ce qui concerne le champ "Rechercher", c'est normal qu'il passe à la ligne parce qu'il n'y a pas la place.
A partir de là, il existe plusieurs solutions :

cacher le champ dans les résolutions où ça déconne
réduire les différentes tailles de texte/logo pour que tout reste sur une ligne
rendre la navigation "nowrap", c'est à dire empêcher que le champ aille à la ligne mais ça va soit provoquer un scroll horizontal soit il va falloir mettre un overflow: hidden; et le champ sera en partie caché

un GRAND merci
C'était exactement cela !
J'ai rajouté votre code

Code:

1
2
3
4
5
@media (max-width: 980px) {
	.et_fixed_nav #main-header, .et_fixed_nav #top-header, .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header {
		position: fixed !important;	
	}
}

dans le fichier style.css du thème enfant