Archived

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

  • 0

Adding A Vertical Line Between Items In Main Nav


Question

Posted · Report post

I would like to add a succinct vertical divider between menu items here: http://cl.ly/image/123F1A070m3f. But I don't want a line to the left of "Home". Ahhhh...

 

I was able to add the top border using ".navigation_wrap". But am struggling with adding what I need.

 

The website is here: http://goo.gl/YXHZ7

 

Thanks for any and all help!

 

:zoro:

Share this post


Link to post
Share on other sites

34 answers to this question

Posted · Report post

@Jenny & @ Catrina: Okay this is simple enough... Now a small tweak... I don't want the vertical line to be full-height. I want a space between the top and the bottom..... so that each menu item doesn't look like it's in a box.... http://cl.ly/image/212Q1h3G0Z2l or perhaps a light dotted line. Something very sedate. IE "border-right-style:dotted;".

 

This is fun!

 

:zoro:

Share this post


Link to post
Share on other sites

Posted · Report post

@Catrina: Really? Like this?:

#page .main_nav ul li {     

border-right: 1px solid #F700E6; 
padding-top: 5px;
padding-bottom: 5px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, like that, but instead of adding it to the individual menu item, you can add it to the list CSS (for ul).

Share this post


Link to post
Share on other sites

Posted · Report post

Hi @Catrina! It's been a while.

 

I totally get what you are suggesting. When I go in Firebug, I see this: http://cl.ly/image/1r39141R3G1Q . From there I can extrapolate that I need to add the requisite code to individual menu items such as li id="menu-item-6165" . My challenge is how to define that via the DIV....

Share this post


Link to post
Share on other sites

Posted · Report post

@Catrina: I am sorry. I don't understand what you mean.

 

Here is what I put:

 

 

#page .main_nav ul li {     
border-right: 1px dotted #b4b4b4; 
}
 
So where do I put my top and bottom padding for these elements?
 
I find CSS for NAV systems so confusing!

Share this post


Link to post
Share on other sites

Posted · Report post

 

#page .main_nav ul li {

    border-right: 1px solid #F700E6;
}

 

 
^^^ targets all of the menu items at once so you don't have to do it individually :)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, i think Cat means apply the code for the padding to the below which stops at the ul class, so its one higher than the previous css and effects the padding for the entire list, so you'll only have to put it in once :-)

 

#page .main_nav ul

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Jenny.... The issue with this is that then the menu item that is last on the right will have a border on its right. Hence my desire to identify individual menu items.

 

(BTW- How are you making out? It's been a while).

 

:phew:

Share this post


Link to post
Share on other sites

Posted · Report post

For the very last menu item, you can write CSS for it that makes it so it doesn't have a right border. So for that, you'll need the li class selector for the last item and just add: border-right: 0px;

Share this post


Link to post
Share on other sites

Posted · Report post

Okay - thank you both (@Catrine & @Jenny). I will muddle my way through this. You are both extremely helpful. Have a pleasant weekend!

 

L

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome :) If you can't get it, just let us know.

 

And I've been well, thank you! Hope you have been doing well also!

Share this post


Link to post
Share on other sites

Posted · Report post

Hello @ James B: Unfortunately your suggestions does not have desired effect. It makes the NAV system "higher". I have done some research and I don't think what I want to do with CSS is possible. Rather, I may need to create a dotted line in Photoshop and insert it as an image. 

 

Thoughts / comments?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi 

Please, you can try with

 

ul.sf-menu li {border-right: 1px solid #F700E6;}

:)

Share this post


Link to post
Share on other sites

Posted · Report post

Just adding a margin-top X and margin-bottom X to your navigation a CSS. For example,

.main-nav a {
margin: 4px 0;
border-right: 1px solid #CCC;
}

Please remember that we are not here to design your site for you, I highly recommend you use Firebug or similar tool to inspect your sites CSS.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks @Batman (Caped Crusader): This gives me the border I need also. But I don't want the border to be from top to bottom. Only partial.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks @ Danny: It doesn't work. I can get the dotted line NP using this:

 

 

#page .main_nav ul li {     
margin: 4px 0;
border-right: 1px dotted #b4b4b4;  
}
 
But the margins do not work. The border still goes from top to bottom. 
 
:startle:

Share this post


Link to post
Share on other sites

Posted · Report post

Hi again, I see margin with firefox

Captura%2520de%2520pantalla%25202012-12-

Your cache?

;)

Share this post


Link to post
Share on other sites

Posted · Report post

@Webwerx

 

The code you're using wont work, you need to target the a CSS for your menu item, use the code I gave you above as an example, add #page or #site to the beginning and it will probably work.

 

Example - http://d.pr/i/Cpxh

Share this post


Link to post
Share on other sites

Posted · Report post

Ha -- You are too quick @Batman....  The issue here is that I do not want the dotted line to go from top to bottom......

Share this post


Link to post
Share on other sites

Posted · Report post

@Danny: I will try what you suggested. THX

Share this post


Link to post
Share on other sites

Posted · Report post

Hey @ Danny: I used this code:

 

 

#site .main-nav a {
margin: 12px 0;
border-right: 1px dotted #b4b4b4;
}
 
The "margin" just make my NAV higher.

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry WebWerx

I do not see the dotted line to go from top to bottom

Captura%2520de%2520pantalla%25202012-12-

:geek:

Share this post


Link to post
Share on other sites