Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2207 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Ombre portée sur menu déroulant

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Ombre portée sur menu déroulant

n°2341605
gti07
à fond...
Posté le 17-11-2019 à 13:13:05  profilanswer
 

Bonjour
J'utilise sur mon site WordPress le Thème Impreza.
Avec ce dernier j'ai placé un menu haut avec une en-tête transparente.
J'aimerais ajouter au texte de ce menu une ombre portée.
J'y arrive en plaçant box-shadow sur mon menu mais celle-ci s'applique aussi au sous menu et c'est pas beau
C'est là que je bloque et que mes piètres connaissances CSS j'arrêtent.
Si une personne veut bien m'aider
 
Merci d'avance
 
Lien par MP


---------------
http://jeu.carre.rouge.free.fr/
mood
Publicité
Posté le 17-11-2019 à 13:13:05  profilanswer
 

n°2341639
mechkurt
Posté le 18-11-2019 à 10:17:16  profilanswer
 

Difficile sans le code source, mais le menu est sans doute imbriqué dans l'autre, donc si tu crées une règles avec > (qui oblige le selecteur suivant à être au niveau directement inférieur), tu devrais pourvoir sélectionner le <ul> du premier niveau.
https://www.zonecss.fr/cours-css/le [...] ts-directs


---------------
D3
n°2341640
gti07
à fond...
Posté le 18-11-2019 à 11:05:18  profilanswer
 

Salut
D'abord merci d'avoir pris le temps de ré"pondre à ma requette.  
Mon problème se situe bien à ce niveau là.
Comme je ne m'y connais pas assez j'ai du mal a comprendre l’imbrication des sélecteurs et je n'arrive pas a trouver la bonne class ou le bon id pour placer mon texte-shadow
 
Je t'envoi le lien par MP si tu peux regarder


---------------
http://jeu.carre.rouge.free.fr/
n°2341644
mechkurt
Posté le 18-11-2019 à 11:28:55  profilanswer
 

C'est encore plus simple, tu as une classe level_1 sur tes liens de premier niveau et level_2 sur ceux de ton sous menu.
 
Suffit de spécifier ta règle de cette façon :

Code :
  1. a.w-nav-anchor.level_1 {text-shadow:2px 2px #000000;}


---------------
D3
n°2341693
gti07
à fond...
Posté le 18-11-2019 à 17:33:30  profilanswer
 

ça fonctionne effectivement si je test avec l'inspecteur de propriété de Chrome en ajoutant

Code :
  1. text-shadow:2px 2px #000000;


 
mais quand j'ajoute le code  

Code :
  1. a.w-nav-anchor.level_1 {
  2. text-shadow:2px 2px #000000;
  3. }

à mon template rien ne se passe
Bref j'arrive pas a trouver la bonne classe pour appliquer le style


Message édité par gti07 le 18-11-2019 à 18:37:47

---------------
http://jeu.carre.rouge.free.fr/
n°2341714
mechkurt
Posté le 19-11-2019 à 09:53:10  profilanswer
 

Ça ressemble à un problème de cache ou de fichier non mis à jour...
Tu vois ta nouvelle règle via l'explorateur ou dans le code source de ta page ?


---------------
D3
n°2341717
gti07
à fond...
Posté le 19-11-2019 à 09:59:55  profilanswer
 

Mais c'est bien sur j'avais vider le cache du site mais pas celui de chrome
On y est presque :
 
Car maintenant quand je scroll vers le bas le menu passe sur fond blanc et à ce moment là l'ombre portée perd son utilité et je trouve pas ça beau.
Y a t il un moyen de faire en sorte qu'elle disparaisse à ce moment là ?


Message édité par gti07 le 19-11-2019 à 10:25:27

---------------
http://jeu.carre.rouge.free.fr/
n°2341768
mechkurt
Posté le 20-11-2019 à 09:53:47  profilanswer
 

Ton header prend la classe "sticky" au scroll fait une règle en dessous qui surcharge la précédente genre :

Code :
  1. header.sticky a.w-nav-anchor.level_1 {
  2.     text-shadow:none;
  3. }


---------------
D3
n°2341837
gti07
à fond...
Posté le 20-11-2019 à 16:54:42  profilanswer
 

Super étape 2 réussie.
Il me manque encore juste un truc (promis je t'emmerde plus après)...mais je t'offre l'apéro si tu passes dans le coin  ;)  
Comment faire maintenant pour supprimer l'ombre sur mobile ?


Message édité par gti07 le 20-11-2019 à 17:01:11

---------------
http://jeu.carre.rouge.free.fr/
n°2341839
mechkurt
Posté le 20-11-2019 à 17:19:45  profilanswer
 

A priori la règle qui te met un fond blanc sur ton menu "mobile" est celle-ci :

Code :
  1. .l-subheader.at_middle .type_mobile .w-nav-list.level_1 {
  2.     background: #fff;
  3. }


Je connais pas ton template et je ne sais pas comment ni ou cette classe est ajouté, surement un JS au chargement qui la colle sur le body...
En tout cas si tu modifie ma règle ci-dessus pour lui adjoindre une 2ème avec le selecteur "enfant de bloc ayant la classe type_mobile" ça devrait le faire :

Code :
  1. .type_mobile a.w-nav-anchor.level_1,
  2. header.sticky a.w-nav-anchor.level_1 {
  3.     text-shadow:none;
  4. }


C'est par ou le coups à boire ? ^^


---------------
D3
mood
Publicité
Posté le 20-11-2019 à 17:19:45  profilanswer
 

n°2341862
gti07
à fond...
Posté le 20-11-2019 à 22:02:21  profilanswer
 

Ca marche pas ou plutot j'ai peur de pas comprendre.
C'est pas grave
Pour boire un coup c'est le site et c'est quand tu veux ce sera volontiers


---------------
http://jeu.carre.rouge.free.fr/
n°2341933
mechkurt
Posté le 21-11-2019 à 14:07:56  profilanswer
 

Encore un problème de cache peut être ?
En toute logique en ajoutant juste le selecteur :

Code :
  1. .type_mobile a.w-nav-anchor.level_1,


Avant la règle qu'on a mis précédemment, ça devrait fonctionner...
Tu as bien mis la virgule, car sinon il va chercher à appliquer la règle au bloc enfant de toutes les classes précédentes.


---------------
D3
n°2342038
gti07
à fond...
Posté le 23-11-2019 à 07:35:58  profilanswer
 

Super cette fois ça marche nickel  
J'avais pas placé le code au bon endroit (j'ai du mal avec les imbrications css)
double tournée d'apéro
Merci


---------------
http://jeu.carre.rouge.free.fr/

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Ombre portée sur menu déroulant

 

Sujets relatifs
Menu en MVVM C#Menu css décentré à gauche
revenier au 1 er onglet des sous menu et sousmenuPlusieurs pages html appellent le même menu. Possible svp ?
[RESOLU] menu déroulant qui fonctionne en tactileMenu qui ne veut pas se fixer.
CSS Menu navigation responsive et fixeMenu CSS invisible sur mobile
Plus de sujets relatifs à : Ombre portée sur menu déroulant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR