web-dev-qa-db-fra.com

Module Masthead 'Jumping' juste après le chargement de la page

Je suis en train de résoudre lentement un certain nombre de corrections de bugs sur un certain nombre de sites et je suis arrivé à celui-ci, qui me laisse perplexe depuis un certain temps.

Le site utilise un module Masthead/Masshead (quel qu’il soit) et juste après le chargement de la page, il semble sauter légèrement derrière le menu.

Par exemple, si vous consultez l'une des pages de traitement, il y a un en-tête vert foncé - peu de temps après le chargement, il se déplace vers le haut et le texte blanc se rapproche du menu.

Je ne peux vraiment pas comprendre la cause de ceci, j'ai demandé l'aide du développeur de modèles, mais malheureusement, cela n'a pas été utile.

Mon hypothèse est qu'il existe des classes CSS contradictoires mais je ne suis en aucun cas un expert CSS.

Merci d'avance. Cordialement D

joomla-3.xcss
1
Dtorr1981

Je ne suis pas un expert en T3, mais la page se charge initialement avec le code HTML suivant:

<header id="t3-header" class="wrap t3-header t3-header-1" data-spy="affix">

Quelques secondes après le début du chargement de la page, une classe "affixe" est ajoutée:

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

Essayez de changer les paramètres de navigation du modèle sur fixe/non fixe pour voir si cela aide.

S'il n'y a pas de paramètres de menu vraisemblables, vous pouvez essayer d'ajouter du code CSS au fichier CSS personnalisé pour modifier la position de la classe "affixe" de "fixe" à "relative", comme ceci ou similaire:

.t3-header.affix {position: relative !important;}

Voir https://joomla.stackexchange.com/a/3878/12 pour obtenir des instructions sur la création ou la modification d'un fichier CSS personnalisé pour les modèles T3.

1
Neil Robertson

L'en-tête de votre site comporte deux sections

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

qui contient la navigation et

<div class="wrap masthead ">

qui contient le titre de votre page avec le fond vert.

La raison pour laquelle il saute est dû au fonctionnement de la classe Affixe de Bootstrap - Bootstrap attend que vous ayez fait défiler la zone à corriger avant d'ajouter cette classe affix à votre en-tête. Comme votre en-tête se trouve en haut de la page, cela se produit dès que la page est entièrement chargée (les utilisateurs ne doivent jamais défiler au-delà). Toutefois, avant le chargement de la page, la classe affixe ne fait pas partie de votre balise d'en-tête. et ainsi la page sera initialement rendue sans elle.

Cette classe d'affixe ajoute le css suivant:

position: fixed;
top: 0;
left: 0;
right: 0;

Position: fixed signifie qu'il apparaît dans un calque par-dessus tout autre contenu. C'est pourquoi, lorsque ces styles sont appliqués, le contenu ci-dessous est poussé vers le haut et l'arrière.

Si vous désactivez javascript et chargez la page, cela devrait illustrer le fonctionnement de la section sans affixer.

Si vous souhaitez afficher toutes les zones vertes, la solution la plus simple consiste à ajouter un remplissage en haut de la page:

body {
  padding-top:52px;
}

devrait le faire. Cela signifie qu'il y a un espace de la même taille que votre en-tête fixe lorsque celui-ci est flottant, ce qui permet de placer la zone verte à la bonne position.

Pour que l'en-tête commence à une position fixe, vous devez ajouter cette classe affix au code de votre modèle, c'est-à-dire changer

<header id="t3-header" class="wrap t3-header t3-header-1" data-spy="affix">

à

<header id="t3-header" class="wrap t3-header t3-header-1 affix" data-spy="affix">

afin qu'il ait la classe d'afflix en place avant Bootstrap l'applique dynamiquement.

Vous pouvez également ajouter le css utilisé par affix avec le code suivant:

header#t3-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}

(NB: ces deux derniers changements signifieront que la zone commence à la position fixe et arrêtera donc le saut, mais n'empêchera pas la section verte d'apparaître derrière celle-ci - vous avez besoin du rembourrage pour cela.)

1
Richard B