Je veux créer un effet goutte d'ombre sur mon site wordpress menu de navigation comme ceci:Ajouter des ombres portées au menu de navigation?
Comment puis-je appliquer sur ma classe .navigation-main, je l'ai essayé, mais rien ne se passe. voici le code d'en-tête
<header id="masthead" class="site-header" role="banner">
<?php
$header_image = get_header_image();
if(!empty($header_image)) { ?>
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name','display'));?>" rel="home">
<img src="<?php echo esc_url($header_image); ?>" class="header-image" width="<?php echo get_custom_header()->width;?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
<?php } else {?>
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<h2 class="site-description"><?php bloginfo('description'); ?></h2>
</div>
<?php }?>
<nav id="site-navigation" class="navigation-main" role="navigation">
<h1 class="menu-toggle"><?php _e('Menu', 'dark_delight'); ?></h1>
<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e('Skip to content', 'dark_delight'); ?>"><?php _e('Skip to content', 'dark_delight'); ?></a></div>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
Code pour appliquer des effets (ce qui est un extrait du site Web auquel j'ai fourni le lien ci-dessus)
#box
{
position: relative;
width: 60%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}
#box:before, #box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Vous avez un lien en direct? – matt