En-tête & navigation n'apparait pas sur version mobile

[chris1111]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis toujours
Lien du forum : http://www.hackintosh-montreal.com/forum

Description du problème

Voila SVP faite le teste sur un SmartPhonne et un PC vous verez aucun Icone de la barre est visible en version mobile
Tester sur Safari et Google Chrome
ScreenShot ⇩


Liens du forum ⇩

https://www.hackintosh-montreal.com/forum

Je suis concerner maintenant car jai un nouveau iPhonne 13 depuis quelques jours
Merci a tous

[Oka.mi]

Bonjour,

C'est normal. La version mobile possède ses propres templates et la barre de navigation classique n'est pas reprise dedans.
Pour l'afficher vous avez deux options :
Soit cliquer sur les trois petites barres en haut à droite pour afficher le menu, et passer en version web.


Soit importer manuellement les liens mais il faudra pour cela modifier vos templates.

[chris1111]

@Oka.mi je te remercie de ta reponsse mais la version WEB je sait quelle fonctionne mais je veut utiliser ma version Mobile.

[Oka.mi]

Bonjour,

En ce cas, que préférez-vous ? Reproduire la barre exactement comme sur la version web, ou les intégrer au menu déroulant ?

[chris1111]

Salut @Oka.mi  jaimerais avoir les deux solution et pouvoir les tester ce serait super jai deja ajouter mon Blog Github sur un Icone
en haut avec une de vos astuce dans le overall_header
ce serait bien de les avoir Sous la banierres et aussi tester le menue déroulant

EDIT **
Si cela vous donne trop de travail envoyer seulement la solution Reproduire la barre exactement comme sur la version web

[Oka.mi]

Bonjour,

Au niveau de vos templates, allez dans Version mobile > overall_header.
Juste avant le <main> de la ligne 451, collez ceci

Code:

<ul id="mobilinks">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>

et n'oubliez pas de publier votre template à la suite.

Dans votre feuille de style css, insérez ce code :

Code:

#mobilinks{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}

Pour l'intégrer dans le menu déroulant, ce n'est pas plus compliqué. C'est juste qu'au niveau de la mise en page, il vous faudra communiquer plus précisément sur ce que vous souhaitez. Voici un aperçu rapide de ce que ça donne sans mise en page :

[chris1111]

Je vous remercie beaucoup  tout fonctionne comme je le voulait  Merci de votre temp et de votre patience
Voici apres modification, jai pas ajouter les ligne du Login et enregistrement car cela ce fait dans le menue
Voila en image les 17 Icones sont presente et fonctionelles    



EDIT ***
Serait til possible davoir les petit point exatement sous chaque image?

Aussi avoir cette image quand on recois un message Priver car elle apparait sur le Forum WEB

Sauf quelle ne peut y etre en permanance, seulement a la recepetion du message. Est possible ?

Autre EDIT *** Presentement jai retirer 4 Icone inutile sur la version Mobile et cest deja Beaucoup mieux!
en image


En faite maintenant il ne manque que ceci

Serait til possible davoir les petit point exatement sous chaque image?
Je vient de voir les point blanc a la bonne place quand le Smartphonne est de coter



Aussi avoir cette image quand on recois un message Priver car elle apparait sur le Forum WEB
cette image est actuelement dans Affichage /Gestion des imagesMode Avancé /Général Navigation/ Nouveau message Priver

[Oka.mi]

Bonjour,

Désolée, en ce moment je n'ai pas les yeux en face des trous. Je n'ai pas vérifié si la variable du template classique fonctionne sur la version mobile, et en fait oui, donc c'est encore plus simple que ce que je pensais. Il vous faut juste importer la variable {GENERATED_NAV_BAR} à l'emplacement précédent dans le overall_header. J'ai modifié mon précédent post en ce sens. En fait vous devez remplacer le bloc <ul id="mobilinks">... </ul> ajouté dans votre template par le nouveau code contenant la variable.

Avec ça, votre barre de navigation sera synchronisée avec celle de la version classique. Si vous voulez enlever des liens spécifiquement sur la version mobile, on pourra passer par JavaScript (Panneau d'administration > Modules > HTML & JavaScript > Gestion des codes JavaScript)

Créez un nouveau JavaScript en cochant "sur toutes les pages" :

Code:

$(function(){
 $('#mobilinks a[href*="register"]').remove();
 $('#mobilinks a[href*="login"]').remove();
 $('#mobilinks a[href*="google"]').remove();
});

Et ça enlèvera les mêmes liens que ceux que vous avez enlevés jusqu'ici.

Pour le souci des points, vous pouvez ajouter cette ligne au id mobilinks :

Code:

list-style-type: none;

J'ai choisi de retirer les points car centrés ou non ils sont juste moches.
Là aussi, référez vous au précédent post, j'ai corrigé le css dans la foulée.

[chris1111]

Super! Merci beaucoup, cest presque parfait maintenant  Il y a un soucie avec cet Icone cest le liens des Downloads il se passe rien
Fonctionne en version WEB seulement
Voici ce qui se passe quand je clique dessus


Et regarder sur mon Imac ce qui se produit quand je clic sur licone depuis mon iPhonne

sinon cest du tres beau boulot
comme vous voyez licone de message recue fonctionne

[Oka.mi]

Effectivement, ce portail n°16 est constitué de widgets personnalisés et visiblement, ils ne sont pas repris sur la version mobile. Pour le coup le problème est indépendant de ce qu'on a fait, et si modification il doit y avoir, elle doit venir de Forumactif. Je vais remonter le souci à l'équipe technique.

Comme alternative, vous pouvez passer par une page HTML.

[chris1111]

OK comment je fait ca pour le liens de la page HTML?
Edit *** Page HTML de teste ajouter mais cette page demmande a remettre nos identifiant de connection

[Oka.mi]

Reproduire votre portail sur une page HTML est facile, mais après réflexion je pense que c'est mieux d'attendre une réponse de l'équipe technique. S'il y a intervention, vous n'aurez aucune modification à faire de votre côté. Si non, je préfère prendre un peu de temps pour adapter ça proprement pour rendre cela aussi responsive que possible (puisque la finalité est l'affichage sur petits écrans comme sur grands). Dans tous les cas, il faudra ouvrir un nouveau sujet car le problème concerné s'éloigne de celui exposé à l'origine.

[chris1111]

Ok merci beaucoup @Oka.mi je vait attendre les DEVS
Sujet résolue Ici