Menu Dividers

[mgwaters 1]

I am migrating a static site to a Wordpress site running on pagelines framework and am having difficulty replication the menu dividers used in the old site which is a forward slash  "  /  "

 

Here is the new Pagelines site:

http://www.lrwalker.com/about/

 ul.sf-menu li:after {
content:"  /  ";
}

ul.sf-menu li a {
    padding: 10px 13px 4px 13px;
    font-family:"Lucida Grande", sans-serif
}

As you can see there seems to be a line break occurring. I tried using a height attribute on the li but that didn't seem to work. Removing the li:after style above displays the menu at the correct height, but obviously with no menu dividers.

 

I'm using a child theme and I notice the main Pagelines theme has the following style declared:

li {
    line-height: 21px;
}

I tried altering that in my child theme (by stating line-height: 10px for example, and even 0px). While it did reduce the overall height of the menu, it did not move the "/" up inline with the menu items.

 

Wordpress version 3.5.1

Pagelines Framework: 2.4.1

 

Can someone point me in the right direction?

 

Thank you!

[catrina 103]

How are the slashes being implemented to begin with?

[mgwaters 1]

Catrina, sorry, I copied and pasted from the wrong style.css file (same issue though!) so I updated my original post above.

[James B 436]

Hi there, try adding the :after and content command to the li>a element. Like

 

ul.sf-menu li a:after {

    content: " / ";

}

 

That seems to fix - http://screencast.com/t/XvERCQ0s

[mgwaters 1]

That did indeed work thank you. Now I just need to suppress the last hash symbol after contact if possible. I tried

ul.sf-menu li a.page-item-18:after {
    content: "";
}

but that didn't work. Also I know specifying the page item isn't ideal since the last menu items could possibly change at some point.

 

I also tried something long the lines of this:

ul.sf-menu li a:last-child:after {
    content: '';
}

but that removed the divider on ALL the menu items.

 

Thanks,

 

Mike

[James B 436]

Hi Mike

 

To format the css on the menu item make sure that's first in the css

.menu-item-356 a:after {
    content: "  " !important;
}

This should make it work based on the last child item.

ul.sf-menu li:last-child a:after {
    content: "  " !important;
}

[mgwaters 1]

Thank you James! That worked beautifully.

[James B 436]

You're welcome :-)