Image dans barre de navigation (site multi langues)

[Arsenouille]

Bonjour,

Je sollicite l'aide de membres du forum car je tente sans succès de remplacer un bouton de navigation ("ENGLISH") dans le head de mon site par l'image d'un drapeau anglais afin de rendre plus visible une nouvelle page crée dans la langue de Shakespeare. Et pour le coup, après 3 tentatives infructueuses, c'est moi qui donne ma langue au chat !

Pourtant, je commence à connaître par cœur le tuto consacré à cette manip ! : aide.jimdo.com/aller-plus-loin-avec-jimdo/images-dans-la-navigation/

Mon site est : skalpott.jimdo.com et voilà mon head :



L'image du drapeau est visible en bas de la page "ENGLISH" et est, pour l'instant beaucoup plus petite (30x14 pixels) que le bouton car j'ai cru comprendre qu'il était important de ne pas dépasser la taille du bouton utilisé.

Difficulté supplémentaire, seul mon bouton de navigation « ENGLISH » doit être en fond et police transparents et non pas tous comme dans le tuto…

Si quelqu'un a une idée de ce qui cloche dans l’affichage du drapeau, et ensuite comment conserver mes autres boutons visibles, je suis preneur !  

[FredVig]

Si vous voulez mettre un drapeau dans le menu, à la place d'un seul lien menu, le tuto que vous indiquez n'est pas entièrement adapté. Celui-ci est destiné à créer un menu de premier niveau entièrement fait de drapeaux. Si vous mettez un seul drapeau, sans, au moins, son équivalent dans une autre langue, cela va paraître incongru. il est préférable de laisser en lettres 'english' dans un menu en lettre. Ceci dit, à vous de voir.
Reprenons le tuto Jimdo.
Vous n'avez pas inséré l'image sur une page cachée, mais au bas de votre page, cela peut fonctionner tout autant. De plus, le fait d'avoir un double lien (en haut et en bas de page) peut être utile. Donc, récupérons le lien de l'image :

Code:

https://image.jimcdn.com/app/cms/image/transf/dimension=190x10000:format=png/path/sc453e00d04c5f7c4/image/i5a4db73707dfd6f7/version/1505163752/image.png

vous pouvez déjà la modifier en taille en modifiant les indications de dimension dans le lien (190x10000) :

Code:

https://image.jimcdn.com/app/cms/image/transf/dimension=80x160:format=png/path/sc453e00d04c5f7c4/image/i5a4db73707dfd6f7/version/1505163752/image.png

Trouvez ensuite l'identifiant de l'onglet à modifier à l'aide de l'inspecteur :

Code:

#cc-nav-view-2893959096

Indiquez dans votre "modifier le Head que vous voulez cette image en background du contenant english :

Code:


<style type="text/css">
/*<![CDATA[*/

#cc-nav-view-2893959096 {background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=80x160:format=png/path/sc453e00d04c5f7c4/image/i5a4db73707dfd6f7/version/1505163752/image.png);
background-position: center;
background-repeat: no-repeat;
}

/*]]>*/
</style>

Ensuite, le tuto ne correspond plus.
Pour effacer le contenu du menu "English", ciblez le contenant supérieur (il contient le mot "english") et mettez son opacité sur 0 :

Code:

#cc-nav-view-2893959096 > a {opacity:0;}

à ajouter après
"background-repeat: no-repeat;
}"
Il est probable que cela ne constitue qu'une première étape,mais commencez déjà par ça

[Arsenouille]

Merci beaucoup FredVig, c'est bien ce que je souhaitait obtenir et ca marche !

NB : j'ai juste déplacé le bouton "ENGLISH" en dernière position dans la barre de navigation car le drapeau n'a pas le même centrage que les boutons dans la version mobile et du coup ca passait mal visuellement en plein milieu...

[mazamet]

Bonjour,
je cherche à faire la même chose que Arsenouille mais je n'y arrive pas.
Je souhaite que l'onglet ENGLISH du menu soit remplacé par un drapeau.
J'ai suivi les tutos pas à pas et utilisé le même code.
J'arrive à rendre transparent le texte mais le drapeau n'apparaît pas.
Auriez-vous une idée?
J'utilise le design Roma .

Merci d'avance de prendre quelques minutes pour me répondre.
Belle journée à toutes et à tous.

[Contenu sponsorisé]