Jump to content
Sign in to follow this  
mgwaters

Menu Dividers

Recommended Posts

mgwaters    1
mgwaters

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!

Share this post


Link to post
Share on other sites
mgwaters    1
mgwaters

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

Share this post


Link to post
Share on other sites
James B    436
James B

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

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mgwaters    1
mgwaters

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

Share this post


Link to post
Share on other sites
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mgwaters    1
mgwaters

Thank you James! That worked beautifully.

Share this post


Link to post
Share on other sites
James B    436
James B

You're welcome :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×