wordpressのオリジナルテーマを制作していて、
メニューを4つ作り、各リンクに対して違う色を設定したいのですが、上手くいきません。
header.php内のナビゲーション部分の記述です。↓
<!-- Navigation --> <div id="mymenu"> <div class="inner"> <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?> </div> </div> <!-- /Navigation -->
style.css内の記述です。↓
#header #mymenu{ height: 60px; line-height: 60px; margin-bottom: 50px; background: #fff; box-shadow: 0 9px 12px -9px #ccc; } #header .menu li{ width: 25%; float: left; } #header .menu a{ border-bottom: 2px solid; line-height: 20px; } .menu a:first-child{ color: #4B709A; } .menu a:nth-child(2){ color: #FFA23E; } .menu a:nth-child(3){ color: #7BCCAC; } .menu a:nth-child(4){ color: #F96A76; } .menu a:hover, .menu a:active { letter-spacing: 3px; transition: all .3s ease; -webkit-transition: all .3s ease; }
.menu a:first-child{
color: #4B709A;
}
.menu a:nth-child(2){
color: #FFA23E;
}
.menu a:nth-child(3){
color: #7BCCAC;
}
.menu a:nth-child(4){
color: #F96A76;
}
ここの部分が上手く反映されていません。
よろしければ回答お願いいたします。
出力されたhtmlです。↓
<!-- Navigation --> <div id="mymenu"> <div class="inner"> <div class="menu-home-container"> <ul id="menu-home" class="menu"> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-31"><a href="http://localhost/wordpress/2016/09/26/hello-world/">Hello world!</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/wordpress/about/">ABOUT</a></li> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost/wordpress/contact/">CONTACT</a></li> <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="http://#">PORTFOLIO</a></li> </ul> </div> </div> </div> <!-- /Navigation -->