Discussion :

[education]

Bonjour à tous,

Je suis actuellement en train de faire un site internet sur Wordpress (mon premier) et j'utilise le thème Salient.

Je souhaite que ma barre de navigation soit transparente en haut de la page mais qu'elle prenne un fond coloré à partir du moment où on scroll. J'ai pu voir pas mal de choses sur ce forum et sur d'autres qui donnent des astuces pour coder ce genre de choses en css mais cela ne semble pas fonctionner avec Salient.

Salient propose en effet déjà toutes ces options mais elles ne semblent fonctionner que dans une mise en page bien particulière. Actuellement, j'utilise le format "row en full screen" ce qui semble forcer mon header à être transparent sur la page entière. Si je prends la mise en page classique, aucun problème j'arrive à faire ce que je veux.

J'aimerais donc savoir s'il existe un code css qui permettrait de forcer mon header à prendre un fond coloré après le scroll.

Voici ce que je récupère en inspectant mon header :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="header-outer" data-has-menu="true" data-transparent-header="true" data-transparent-shadow-helper="false" data-remove-border="true" class="transparent dne-disabled at-top" data-has-buttons="no" data-using-pr-menu="false" data-mobile-fixed="1" data-ptnm="false" data-lhe="animated_underline" data-user-set-bg="#020f24" data-format="default" data-permanent-transparent="false" data-megamenu-rt="0" data-remove-fixed="0" data-cart="false" data-transparency-option="" data-box-shadow="large" data-shrink-num="5" data-full-width="true" data-condense="false" data-using-secondary="0" data-using-logo="1" data-logo-height="90" data-m-logo-height="24" data-padding="28" data-header-resize="0" style="padding-top: 28px; transform: translateY(0px); top: 32px;">			
</div>

Merci d'avance pour votre aide !

[education]

Bonjour,

Je m'occupe d'un site internet créé sur wordpress et j'aimerais changer le fond du header quand on scroll : transparent en haut de la page, avec un fond sinon. J'utilise le thème salient qui permet déjà de configurer beaucoup de choses mais surtout lorsqu'on utilise un format classique.

Je ne m'y connais pas du tout en javascript mais je suis tombé sur ce code qui fait exactement ce que je souhaite... Mais ça ne marche pas.
J'ai créé un fichier jquery et ai modifié le css sauf que je pense que je n'utilise pas le bon nom de mon header.

Voici le code qui m'intéresse : http://jsfiddle.net/634d6vgq/2/

Voici ce que j'ai mis en JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header-outer").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header-outer").removeClass("active");
        }
    });
});

Voici ce que j'ai en inspectant mes éléments :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Body class="page-template-default page page-id-7766 logged-in admin-bar ascend wpb-js-composer js-comp-ver-5.5.2 vc_responsive customize-support"

Et un peu plus bas je retrouve mon header:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="header-outer" data-has-menu="true" data-transparent-header="true" data-transparent-shadow-helper="true" data-remove-border="true" class="transparent dne-disabled" data-has-buttons="no" data-using-pr-menu="false" data-mobile-fixed="1" data-ptnm="false" data-lhe="animated_underline" data-user-set-bg="#020f24" data-format="default" data-permanent-transparent="false" data-megamenu-rt="0" data-remove-fixed="0" data-cart="false" data-transparency-option="1" data-box-shadow="large" data-shrink-num="5" data-full-width="true" data-condense="false" data-using-secondary="0" data-using-logo="1" data-logo-height="90" data-m-logo-height="24" data-padding="28" data-header-resize="0" style="padding-top: 28px; top: 33px;">	
	<header id="top">
		<div class="container" style="visibility: visible;">
			<div class="row">
				<div class="col span_3">
					...

Je ne sais pas du tout comment relier tout ça à mon code
Merci d'avance pour votre aide.

[Invité]

Salient est un thème payant.
Donc...

Et de ce que j'ai vu (démo), il fait ce que tu veux (changement de couleur de fond du menu au scroll) "par défaut".

Donc, si tu ne montres pas ton site en ligne, c'est tout ce que je peux dire.

[education]

Désolé je n'avais pas vu ta réponse, merci pour ton aide.
Voici une des pages du site : http://lereseausynapse.com/prestations/

J'essaye déjà de modifier le fond uniquement en css sans prendre en compte le scroll mais même comme ça ça ne marche pas...
J'ai vu avec inspecter, dans style l'élément suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@media only screen and (min-width: 1001px)
html body #header-outer[data-transparent-header="true"].transparent {
    background-color: #ffffff!important;
    box-shadow: none!important; }

En changeant en direct la couleur cela fonctionne, par contre dès que je le mets en script css de ma page ça ne fait rien...

[Invité]

Si on se réfère à ces démos, ça le fait bien :

• http://themenectar.com/demo/salient-promo/
• http://themenectar.com/demo/salient-band/
• http://themenectar.com/demo/salient-ecommerce-creative/
• ...

A priori, il faut chercher du coté de #header-outer.

Je ne saurais pas en dire plus.

[education]

Merci pour ta réponse. Oui, ça le fait bien mais sur les pages qui se scrollent de a à z.
Dans le cas où on utilise un format full row (c'est à dire des slide qui se changent avec les anchor point sur la droite de ma page), les options disparaissent.
Je suis obligé de passer par du css et surement du jquery...

[Invité]

Bonjour,

montre-nous ta page en ligne.