Formation Joomla : comment fixer son menu en haut de page

fixer votre menu lors du scroll

Il est utile pour une question de navigation de fixer le menu de son site Joomla. En effet, les templates modernes privilégiant les visuels, nécessitent très souvent le recours au scroll de la souris. Il est donc utile afin d'améliorer l'ergonomie du site et faciliter l'expérience utilisateur, de figer votre menu. De cette façon, l'internaute aura toujours accès à votre menu quelque soit son positionnement sur les pages web.

C’est le sujet du tutoriel que nous allons traiter ensemble. Pour suivre cette formation, aucunes connaissances en langage de programmation vous seront demandées, car notre formateur vous donnera toutes les sources modifiées.

Comment ajouter l’effet sticky sur mon menu Joomla

Modifier le code source du template :

Pour commencer il va vous falloir ouvrir le fichier index.php du template protostar. Bien entendu, nous avons fait cela sur un site de démonstration, mais pour la production si vous utilisez le template protostar, étant donné qu’il est natif Joomla, je vous invite à le dupliquer pour travailler sur une copie de celui-ci, sinon à la prochaine mise à jour de Joomla, vos modifications risquent de disparaitre. Voir notre tutoriel Comment dupliquer son template joomla pour garder ses modifications

Ouvrez le fichier \templates\protostar\index.php

Si vous utilisez notepad++ vous pouvez faire une recherche de

index a modifier

Nous allons le remplacer par :

index modifier

Appel de la feuille de style dans le template

Ensuite toujours dans le fichier index.php de votre template, nous allons appeler une nouvelle feuille de style custom.css que vous aurez précédemment créée et placée dans template\protostar\css

Ajoutez la ligne comportant le custom.css dans le head de votre template. Dans notre exemple, il s'agit de la ligne 44

appel css

Ajouter une ligne à votre custom.css

Dans votre nouvelle feuille de style, ajoutez le code suivant afin de figer le menu lorsque la class lui sera alouée :

css custom

Modifier le fichier template.js de votre template

Rendez-vous dans template\protostar\js\template.js

Placez-vous tout à la fin du fichier et ajoutez les quelques lignes suivantes :

js

Voilà vous pouvez retourner sur votre site et le rafraichir à l'aide de la touche F5. N’oubliez pas, si vous avez dupliqué votre template, de vérifier qu'il soit bien assigné par défaut, à votre site.

Si les explications ci-dessus ne sont pas suffisantes, nous vous invitons à suivre pas à pas ce tutoriel en vidéo.
N’hésitez pas à partager ce tutoriel

Poursuivez ce tutoriel en vidéo à cette adresse. Il vous suffit pour cela d’être membre de notre site, c’est gratuit, il vous suffit simplement de créer un compte
Dans ce second tutoriel sur les menus fixes, nous allons voir comment corriger le débordement sur le menu que nous venons de créer

Voir al suite : Suite Comment fixer un menu lors du scroll