Convert this menu with multiple spans and classes to Wordpress 3 WordPress
- SOLVED
Hi,
I used my favorite PSD to CSS coder to create the initial HTML for my theme, I usually like to integrate Wordpress on my own, however this time they surprised me with top navigation.
<strong>Development site:</strong> [[LINK href="http://wcdco.info/cV"]]http://wcdco.info/cV[[/LINK]]
<strong>PS Not worried about the condition of development site, worried about integrating the spans as listed below.</strong>
<strong>Here is the problem with the menu they presented:</strong>
<ul>
<li class="active">
<a href="#">
<span class="left-bg">
<span class="right-bg">Home</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="left-bg">
<span class="right-bg">Buy Essays</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="left-bg">
<span class="right-bg">Contact us</span>
</span>
</a>
</li>
</ul>
#header .top-box UL {
float: right;
margin: 11px 0 0;
}
#header .top-box UL LI {
display: inline;
float: left;
}
#header .top-box UL LI A {
float:left;
font-size: 14px;
font-weight: bold;
color: #FFF;
height: 33px;
cursor: pointer;
text-shadow: 2px 2px 2px #647d3d;
margin-right: 11px;
margin-left: 11px;
}
#header .top-box UL LI A .right-bg {
height: 33px;
float: left;
padding: 0 15px;
line-height: 230%;
}
#header .top-box UL LI A .left-bg {
float: left;
}
#header .top-box UL LI.active A, #header .top-box UL LI A:HOVER {
background: url("../img/bg/menu-bg.png") repeat-x left top;
text-decoration: none;
}
#header .top-box UL LI.active A .left-bg, #header .top-box UL LI A:HOVER .left-bg {
background: url("../img/bg/menu-left-bg.png") no-repeat left top;
}
#header .top-box UL LI.active A .right-bg, #header .top-box UL LI A:HOVER .right-bg {
background: url("../img/bg/menu-right-bg.png") no-repeat right top;
}
Honestly there’s nothing unique except for the drop shadow and roundness of the mouse over’s / downs …
<em>If you could fix or recommend a solid alternative solution, I would be much appreciated in your assistance.</em>
Thanks,
Answers (3)
Nick Parsons answers:
I think this is what you're after:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_before' => '<span class="left-bg"><span class="right-bg">', link_after => '</span></span>' ) ); ?>
West Coast Design Co. comments:
Yes!!
Nick … what about the current page item, that’s all I need … :)
Nick Parsons comments:
Just do a find and replace in the css code you posted to replace all occurences of ".active" to ".current-menu-item".
West Coast Design Co. comments:
HAHA ... Nick, thanks.
idt answers:
I think you just need to change this:
#header .top-box ul {
float: right;
margin: 11px 0 0;
}
to this:
#header .top-box ul {
float: right;
margin: 7px 0 0;
}
or you could just simply add this to the bottom of your css
#header .top-box ul {
margin-top: 7px;
}
West Coast Design Co. comments:
You obviously never read my post.
idt comments:
Ahh your problem was adding the span to the wp_list_pages output?
Would using link_after and link_before help? You could call wp_list_pages something like this:
<?php wp_list_pages('link_before=<span class="left-bg"><span class="right-bg">&link_after=</span></span>&title_li='); ?>
Jermaine Oppong answers:
Im revising this and will send you something shortly. You can also ignore the span stuff and replace all that CSS with:
You can ignore the span stuff and remove all that CSS code and replace with:
#header .top-box UL {
float: right;
margin: 3px 0 0;
}
#header .top-box UL LI {
display: inline;
float: left;
}
#header .top-box UL LI A {
float:left;
font-size: 14px;
font-weight: bold;
color: #ffffff;
height: 35px;
line-height:35px;
text-shadow: 2px 2px 2px #647d3d;
margin: 0 11px;
padding: 0 15px;
}
#header .top-box UL LI.active A, #header .top-box UL LI A:HOVER {
background: #92a469;
text-decoration: none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border-bottom: 1px solid #b4c38e;
border-top: 1px solid #8aa15c;
line-height:33px;
height:33px;
}
You will still get pretty much the same look with the CSS rounded corner effect. Makes page load quicker.
West Coast Design Co. comments:
Yea, basically do I use their code … or find another menu and modify ... or even write one from scratch… aw decisions.