Archived

This topic is now archived and is closed to further replies.

  • 0

How to insert vertical lines between menu items


Question

Posted · Report post

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

post-23248-0-93368600-1371574706_thumb.p

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Try adding to the previous CSS

line-height: 21px;

Share this post


Link to post
Share on other sites

Posted · Report post

That didn't work unfortunately

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites