Jump to content


Photo
- - - - -

Menu Dividers

menu dividers

Best Answer James B , 09 May 2013 - 09:09 PM

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

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 mgwaters

mgwaters

    Advanced Member

  • Members
  • 35 posts

Posted 09 May 2013 - 03:54 PM

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:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

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!



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 May 2013 - 04:14 PM

How are the slashes being implemented to begin with?



#3 mgwaters

mgwaters

    Advanced Member

  • Members
  • 35 posts

Posted 09 May 2013 - 04:20 PM

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



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 May 2013 - 09:09 PM   Best Answer

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 -

Please Login or Register to see this Hidden Content


  • mgwaters likes this

#5 mgwaters

mgwaters

    Advanced Member

  • Members
  • 35 posts

Posted 10 May 2013 - 12:34 AM

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

Please Login or Register to see this Hidden 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:

Please Login or Register to see this Hidden Content

but that removed the divider on ALL the menu items.

 

Thanks,

 

Mike



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 01:01 AM

Hi Mike

 

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

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content



#7 mgwaters

mgwaters

    Advanced Member

  • Members
  • 35 posts

Posted 10 May 2013 - 01:17 AM

Thank you James! That worked beautifully.



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 01:18 AM

You're welcome :-)