Jump to content


Photo
- - - - -

How to insert vertical lines between menu items

css

  • Please log in to reply
5 replies to this topic

#1 vibekestorm

vibekestorm

    Advanced Member

  • Members
  • 34 posts

Posted 18 June 2013 - 05:00 PM

I have tried to find the answer here in the forums but I can't find it anywhere. Anyone who can tell me how to insert vertical lines between menu items like this mock up that I've attached. I haven't set up the page just yet, but if it's needed I will do it ASAP.

 

Best regards,

Vibeke

Attached Files



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 June 2013 - 05:22 PM

Hi,

 

You have to set a custom class for the menu items, except for the last.  You do this via Dashboard > Appearance > Menus. Click Screen Options and check the box for Custom Class (not sure of the exact phrase).  When finished, click Screen Options to close the panel.

 

Then, in each menu item, add a custom class, using the same class for each. Something like mylinkright. Again, do not add the class to the last menu item.

 

Then, you'll need some custom CSS. Something like:

.mylinkright { border-right: 1px solid black;}



#3 vibekestorm

vibekestorm

    Advanced Member

  • Members
  • 34 posts

Posted 18 June 2013 - 05:35 PM

Thank you so much - they turned a big tall those lines. Is there some way I can shorten them a bit?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 June 2013 - 06:02 PM

Try adding to the previous CSS

line-height: 21px;



#5 vibekestorm

vibekestorm

    Advanced Member

  • Members
  • 34 posts

Posted 18 June 2013 - 06:10 PM

That didn't work unfortunately



#6 James B

James B

    Advocate

  • Members

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

Posted 18 June 2013 - 09:42 PM

Hi there,

 

It depends which class you're applying the border code to and what other css it currently has applied to it. When you have the page set up if you look in the firebug or chrome inspector, target the css for the line and you should see an instruction in the code for what's creating the height or depth of the lines. By selecting the various elements in the css for that class/id and cancelling them out or editing them to a specific figure, you should be able to tailor the height of the line.

 

Without seeing the live version and where the code is placed, it's hard to tell to be honest. It will be trial and error to determine the correct code.







Also tagged with one or more of these keywords: css