Posted 14 December 2012 - 04:22 PM
I would like to add a succinct vertical divider between menu items here: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:
Thanks for any and all help!
Posted 14 December 2012 - 05:21 PM
You'll need to use the selector for individual menu items and use the border-right property:
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:. 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....
Posted 14 December 2012 - 07:10 PM
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).
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;
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!
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!
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....or perhaps a light dotted line. Something very sedate. IE "border-right-style:dotted;".
This is fun!
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).
Posted 17 December 2012 - 09:10 PM
@Catrina: I am sorry. I don't understand what you mean.
Here is what I put:
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
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?
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 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.
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.
Posted 18 December 2012 - 01:41 PM
Thanks @ Danny: It doesn't work. I can get the dotted line NP using this: