Question

I am using span tags to target some nub styles for a navigation bars in WP. However, the code is registered in a WP template and it appears the span is not being picked up when I view the code WP is outputting and I am not sure why. It must be the css is not picking up the span tag but I don’t know why.

Here is the template code:

<nav id="sub-navigation">
    <?php wp_nav_menu(array('menu' => 'Sub Nav Menu'));?>
<span></span></nav>

Here is the relevant css:

#sub-navigation{ margin:20px 0 30px 0}

#sub-navigation ul{list-style:none}

#sub-navigation li a{display:block;background-color:#647484;overflow: visible !  
important; color:white; font:1.4em Verdana,Geneva,sans-serif; padding:10px 10px 10px 
25px; position:relative; text-decoration:none; margin:0 0 5px 0; width:233px;}

#sub-navigation li a span{position:absolute; right:100%; top:5px; width:15px;   
height:100%; background-color:#647484; background-image:url(images/navshadow.png); 
background-position: top right; background-repeat:repeat-y;}

#sub-navigation li:nth-child(2) a, #sub-navigation li:nth-child(2) a span{background-  
color:#728c8c}
#sub-navigation li:nth-child(3) a, #sub-navigation li:nth-child(3) a span{background-
color:#768c72}
#sub-navigation li:nth-child(4) a, #sub-navigation li:nth-child(4) a span{background-  
color:#909673}
#sub-navigation li:nth-child(5) a, #sub-navigation li:nth-child(5) a span{background-  
color:#647484}
#sub-navigation li:nth-child(6) a, #sub-navigation li:nth-child(6) a span{background-  
color:#728c8c}

#sub-navigation li a:hover{text-decoration:none; background-color:#666}
#sub-navigation li a:hover span{background-color:#666}

Answer 1

According to the WordPress “wp_nav_menu” documentation, you can use link_before to set the text that precedes the link text inside tag:

wp_nav_menu( array( 'menu' => 'Sub Nav Menu', 'link_before' => '<span>/<span>' ) );

Try using that to assign the empty span tags in your menus.