And my CSS for this is:
#menu {
height: 70px;
margin: 0 auto;
text-align:auto;
}
.menuitems {
text-align: center;
padding-top: 35px;
color: #CCCCCC;
font-size: .9em;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.menuitems a {
color: #CCCCCC;
text-decoration: none;
text-transform: uppercase;
}
.menuitems a:hover {
text-decoration: none;
text-transform: uppercase;
color: #FFFF00;
}
#menu ul li {
list-style-type: none;
display: inline;
padding: 0 8px 0 8px;
}
Tried a few things like .. editing through the core and so on, so far I’m pretty lost. I may just end up hard coding navigation and forget about it.
have you thought about putting borders on the right of your list-items? and a little padding maybe?… similar effect to using pipes.
Yeah, I did but then I get trailing lines. I may go that route, but I’m more for the “do it the right way” idea.
Thanks for the help. I’ll try that and see what happens.
well.. I see you have a home link there first, which is not in your wp_list_pages output…
maybe put the border on the LEFT side of your list-items, and then put your home link in a list-item which has the border removed from it.
It looks ok, but I get it looking like this:
HOME | ABOUT | OTHER PAGE | OTHER PAGE |
No | at start, one at the finish. I’m sure this just means a few more CSS lines.
Thanks Ivonic.
If anyone has anything else to add that may work, let me know!
Thanks!
I think maybe you posted just as I posted… putting it on the left would work.
Ok, new issue on this idea.
I get now this
| HOME || ABOUT || OTHER PAGE || OTHER PAGE |
Which isn’t what we wanted.
Man, why can I just say “BOO!” and scare this stuff into shape?!
seems you have two borders now… put your border on the left side only… then make a class for the LI which contains your HOME link, and set border: none
Here comes my uber-noobness.
What!?
<div id="menu"><ul class="menuitems"><li id="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li='); ?></ul></div>
^ That is my menu now. I’ll make an id fo rthe menu home link.
#menu ul li {
list-style-type: none;
display: inline;
padding: 0 8px 0 8px;
border-left: 1px solid #cccccc;
}
.menuhome ul li {
list-style-type: none;
display: inline;
padding: 0 8px 0 8px;
}
My new CSS.
Not working. I’m sure it’s a matter of “Tadd, you’re a moron” …
Thanks for the help Ivovic.
try this for the css:
#menu ul li {
list-style-type: none;
display: inline;
padding: 0 8px 0 8px;
border-left: 1px solid #cccccc;
}
#menuhome { border: none; }
Ok, but how about the header? I put it as id=”menuhome” and class=”menuhome” …
<li class="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
Like that.
Is this incorrect as well?
you’ve lost me now… where is this most recent link?
refer to class=”menuhome” as .menuhome{} in your css. refer to id=”menuhome” as #menuhome{} in your css.
it doesnt matter which one you use, as long as you refer to it correctly in the css.
Ok, this is what I have (I’ve give you an online link, but I’m working in WAMP right now for dev purposes)
<div id="menu"><ul class="menuitems"><li class="menuhome"><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('title_li='); ?></ul></div>
#menu ul li {
list-style-type: none;
display: inline;
padding: 0 8px 0 8px;
border-left: 1px solid #cccccc;
}
#menuhome { border: none; }
ok, see you changed the id=menuhome which you posted above… into class=menuhome.
so now, in the css, replace the #menuhome with a .menuhome
you with me now?
