Divider Line under Navigation

[Robyn Sealock]

Hi Bill,

I’m building a website using Bottega. Love it! I just have a question; the person I’m building it for would like a divider line between the navigation and the content (as you can see from the website, I already have a bit of changed CSS in there). Can you help me? I can format the divider once you can tell me how to insert it.

Thanks!

[Bill Robbins]

Hello Robyn,

You can add in a border under the navigation menu. The easiest option would be to place a border on the bottom of the header. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header {
   	border-bottom: 1px solid #333;
   }
   

3. You can change the style of the border, thickness and color by altering that snippet above.
4. Update your settings.

That should do it. If you have any questions or trouble, just let me know.

Thanks,
Bill

[Robyn Sealock]

Thank you! One more question – how can I add a vertical line in between menu items? Every time I try it using custom CSS I’ve found elsewhere, the font changes to something illegible, so I know I’m doing something wrong.

Thanks, again!

[Bill Robbins]

Glad that helped out. Here’s how I would go about adding in a line between the menu items:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #navigation li {
   	border-left: 1px solid #333;
   }
   
   #navigation li:first-child,
   #navigation li li {
   	border: none;
   }
   

3. Update your settings.

[Bill Robbins]

Sorry that posted before I intended it to.

That should give you a border between top level menu items. You can change the color by editing the #333 in the snippet above. You can also alter the width and border style if you need to.

Let me know if you have any questions.

Have a great weekend,
Bill

[Robyn Sealock]

Thank you!

[Bill Robbins]

Anytime 🙂

[Author]

Posts