I've noticed links in the showing off thread that had what looked like menus in the sidebars with > symbols before the items. I liked that look and asked (on that thread) about how to make them.

I got this answer:

Originally Posted by dgfrench

The > in the menu are standard with the theme I suppose cuz I haven't made any changes to it.

Then, in looking closer at those sites, I realized they were using categories or some other kind of menu, which had a different styling than custom menus. I tried to match that css with something applicable to my custom menu layout.

I almost have what I want, except I get an unwanted carriage return after the > and before my menu items. I've tried lots of variations, e.g., width, text-align, margin, padding, display, word-wrap, etc, but I still get that extra carriage return. What am I missing?

Thanks for your help.

Jerry

Screenshot
Site layout

use a code examiner like FireBug in Firefox and you should be able to track it down if a few moments and then add in some CSS rules and play with the existing ones to figure it out. Might take a 1/2 hr but it should be doable.

Originally Posted by juggledad

use a code examiner like FireBug in Firefox and you should be able to track it down if a few moments and then add in some CSS rules and play with the existing ones to figure it out. Might take a 1/2 hr but it should be doable.

That's what I've done, for way more than 1/2 hour. I've tried lots of variations, e.g., width, text-align, margin, padding, display, word-wrap, etc, but I still get that extra carriage return.

Maybe something will jump out at somebody else that I'm missing.

try adding something like

.menu li {
    position: relative;
    text-align: left;
    top: -4px;
}

.widget a {
    position: relative;
    top: -15px;
}

but prefix them with a #nav_menu-13

Originally Posted by juggledad

try adding something like

.menu li {
    position: relative;
    text-align: left;
    top: -4px;
}

.widget a {
    position: relative;
    top: -15px;
}

but prefix them with a #nav_menu-13

I can see how that might work, but it seems like a hack rather than fixing the real problem. The categories menu css doesn't use anything that, and that's what I'm trying to emulate.

I think I just have something wrong. I'd rather find the real fix, but I might use your hack if I can't figure it out. Maybe somebody else can spot what I missed.

Thanks.

Jerry

I figured it out. I now have:

• Vertical custom menus in my sidebar,
• > before each menu item,
• > and menu item in theme blue color,
• Long lines wrap,
• Subsequent lines left align with first line indent
  

Here's the css that did it:

/* Vertical Menus */

.menu li
{
width: 100%;
margin: 0px;
padding-left: 1.5em;
display: list-item;
color: #0090D3;
text-indent: -1.5em;
}

.menu li a
{
display: inline;
white-space: normal; 
}

.widget ul.menu > li::before 
{
content: '\203a \00a0\00a0';
}

What eliminated the carriage return look was this line:

.menu li a 
{
display: inline; 
}