Mettre son menu en fin de code et l'afficher en haut de page

[WebRankInfo]

Je fais appel aux dév HTML / CSS / JS

Comment faire concrètement pour mettre son menu en fin de code HTML tout en l'affichant en haut de page (sur ordinateur, et sur mobile avec un lien/icône burger classique) ?
(je préfère de loin le cas où il n'existe qu'un seul menu à la fois pour ordinateur et pour mobile)

Pouvez-vous m'éclairer sur les différentes façons de faire ça, en général et ensuite spécialement avec WordPress ?
Avez-vous des exemples de sites qui l'ont fait ?

Merci d'avance !

 

[cthierry]

Genre le retirer de header.php, puis le mettre dans le footer.php et lui coller une classe : .tonmenu { position: fixed; top: 0; } => pas testé mais c'est direct ce que j'ai pensé

 

[WebRankInfo]

étant pas doué en CSS/JS, je préfère pas essayer

 

[pomination]

Pas trop mon domaine mais à part une injection de code via JS, je ne vois pas trop. Ce qui posera d'autres problèmes a priori, notamment sur d'éventuels CLS.

 

[jp30]

Regarde avec le CSS et order :

https://developer.mozilla.org/fr/docs/Web/CSS/order

 

[WebRankInfo]

merci ça semble une bonne piste. connaissez-vous des sites qui utilisent cette technique ?

 

[eldk]

Bonjour,

Ici une expllication Flexbox/Order, donc pas de JS : https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-order

> merci ça semble une bonne piste. connaissez-vous des sites qui utilisent cette technique ?

Pas mal de sites sous Boostrap utilisent cela. https://getbootstrap.com/docs/5.3/utilities/flex/#order

 

[WebRankInfo]

merci !

 

[jp30]

Sur www.webtt.com, par exemple sur la page d'accueil, pour changer la position des menu de pagination dans des rubriques "Dossiers pratiques" et "atelier vélo"

 

[WebRankInfo]

je n'ai pas compris...

 

[jp30]

Ce menu de pagination

 

[colonies]

étant pas doué en CSS/JS, je préfère pas essayer

Tu peux déplacer le menu dans le code et l'afficher en haut avec :
.main-nav {
/* les styles actuels */
position: absolute;
top: 80px;
width: 100%;
}
Il faudra ensuite changer les classes css qui attendent ce div dans le <header>, mais je ne comprend pas l'intérêt : il y a très peu de code, il est là où il faut dans le code de la page pour un affichage rapide pendant le chargement, c'est ce que Google aime... mystère.

Si tu cherches à corriger quelque chose... ça n'est peut-être pas le menu qui est le problème ? Ou bien c'est un test ?

 

[WebRankInfo]

merci ! j'ai tout de même l'impression que Flexbox/Order est + "propre" comme méthode ?

ma question ne concerne pas forcément WebRankInfo mais potentiellement d'autres sites
oui c'est purement un test SEO, pour que les premiers liens trouvés par Google soient ceux dans le contenu principal. Pour l'instant, de ce que je peux trouver comme tests, on pense encore que Google attache plus d'importance au premier lien (je pense à l'anchor text) dans le cas où une page A fait plusieurs liens vers une même page B

 

[colonies]

merci ! j'ai tout de même l'impression que Flexbox/Order est + "propre" comme méthode ?

Oui, en général c'est plus logique.