vertical line between menu buttons?

[hermanoid]

Hi,

Is there away for me to add a vertical line between all of my menu buttons in the navigation menu and specify a color for the lines?

[Retread]

Hi hermanoid

I created a little CSS hack to add a vertical divider to the right of each button in the Navigation Menu (except the last button). If you'd like to try this, you can ADD it to the bottom of the Style Sheet for the theme you want to alter.

From your Admin panel, navigate:
Admin Home> Themes> Advanced Styles & CSS then click the Style Sheet tab.
Select the desired theme from the dropdown to the right of Current Theme.

Scroll all the way to the bottom and add this:

/* Add dividers between Nav Bar buttons */
#navigation-menu li::after{
   content:"";
   border-right:4px solid #FF00FF;
   margin-left:4px;
}
#navigation-menu li:last-of-type::after{
   display:none;
}
/*End of Section */

Edit: Use this instead.

/* Add dividers between Nav Bar buttons */
#navigation-menu li::after{
   content:"";
   border-right:4px solid #FF00FF;
   margin:0px 2px;
}
#navigation-menu li:last-of-type::after{
   display:none;
}
/*End of Section */

Then click the Save Changes button at the bottom of the page or the Save Theme button near the top.

Change the 4px value to alter the width of the dividers. Change the 2px value to alter the gap between the dividers and the buttons. Change the #FF00FF (Magenta) value to whatever color you desire.

If you need help with color values, this reference is pretty good:
www.w3schools.com/colors/default.asp

Please let me know if that gets you where you want to go.

[hermanoid]

Thanks Retread !

That worked great!



I was also wondering if there is a way to give the buttons a black border all around each button to make them stand out better.  

[Retread]

You're welcome.

Border around each button? Sure.

Add this to the bottom of the Style Sheet:

/* Border around each Nav Bar button */
#navigation-menu li a{
   margin: 0px 1px;
   border: 2px solid #000000;
   border-radius: 3px;
}
/* End of Section */

If you change solid to outset it will create a very different look. Personally I like it but you might not.

The 3px border-radius softens the corners. Change it to 0px if you want square corners or a larger value for more rounded corners.

[hermanoid]

Thank you Retread