Ombre portée sur menu déroulant

Ombre portée sur menu déroulant - HTML/CSS - Programmation

Marsh Posté le 17-11-2019 à 13:13:05    

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/
Reply

Marsh Posté le 17-11-2019 à 13:13:05   

Reply

Marsh Posté le 18-11-2019 à 10:17:16    

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
Reply

Marsh Posté le 18-11-2019 à 11:05:18    

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/
Reply

Marsh Posté le 18-11-2019 à 11:28:55    

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
Reply

Marsh Posté le 18-11-2019 à 17:33:30    

ç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/
Reply

Marsh Posté le 19-11-2019 à 09:53:10    

Ç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
Reply

Marsh Posté le 19-11-2019 à 09:59:55    

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/
Reply

Marsh Posté le 20-11-2019 à 09:53:47    

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
Reply

Marsh Posté le 20-11-2019 à 16:54:42    

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/
Reply

Marsh Posté le 20-11-2019 à 17:19:45    

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
Reply

Marsh Posté le 20-11-2019 à 17:19:45   

Reply

Marsh Posté le 20-11-2019 à 22:02:21    

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/
Reply

Marsh Posté le 21-11-2019 à 14:07:56    

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
Reply

Marsh Posté le 23-11-2019 à 07:35:58    

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/
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed