Jump to content


Photo
- - - - -

Adding A Vertical Line Between Items In Main Nav

css navigation menu

Best Answer catrina , 18 December 2012 - 06:22 PM

You should see this demo to make sure it would behave the way you expect it to: http://www.w3schools...order-image.asp

Go to the full post


  • Please log in to reply
34 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 14 December 2012 - 04:22 PM

I would like to add a succinct vertical divider between menu items here: 

Please Login or Register to see this Hidden Content

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: 

Please Login or Register to see this Hidden Content

 

Thanks for any and all help!

 

:zoro:



#2 catrina

catrina

    Advocate

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

Posted 14 December 2012 - 05:21 PM

You'll need to use the selector for individual menu items and use the border-right property:

Please Login or Register to see this Hidden Content



#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 14 December 2012 - 05:33 PM

Hi @Catrina! It's been a while.

 

I totally get what you are suggesting. When I go in Firebug, I see this: 

Please Login or Register to see this Hidden Content

. 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....



#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 14 December 2012 - 07:10 PM

 

Please Login or Register to see this Hidden Content

 

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


#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 14 December 2012 - 07:48 PM

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:



#6 catrina

catrina

    Advocate

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

Posted 14 December 2012 - 08:09 PM

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;



#7 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 14 December 2012 - 08:10 PM

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

 

L



#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 14 December 2012 - 10:16 PM

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!



#9 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 December 2012 - 07:05 PM

@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.... 

Please Login or Register to see this Hidden Content

or perhaps a light dotted line. Something very sedate. IE "border-right-style:dotted;".

 

This is fun!

 

:zoro:



#10 catrina

catrina

    Advocate

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

Posted 17 December 2012 - 08:07 PM

To add more space you can add bottom padding:

Please Login or Register to see this Hidden Content



#11 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 December 2012 - 08:22 PM

Please Login or Register to see this Hidden Content



#12 catrina

catrina

    Advocate

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

Posted 17 December 2012 - 08:33 PM

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



#13 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 17 December 2012 - 09:10 PM

@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!


#14 James B

James B

    Advocate

  • Members

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

Posted 17 December 2012 - 11:37 PM

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



#15 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:06 PM

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?



#16 batman

batman

    Bat Learning

  • Members

  • 2104 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 December 2012 - 01:28 PM

Hi 

Please, you can try with

 

Please Login or Register to see this Hidden Content

:)



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 01:31 PM

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

Please Login or Register to see this Hidden Content

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.



#18 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:34 PM

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.



#19 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:41 PM

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:


#20 batman

batman

    Bat Learning

  • Members

  • 2104 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 December 2012 - 01:45 PM

Hi again, I see margin with firefox

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

Your cache?

;)







Also tagged with one or more of these keywords: css, navigation, menu