Adding line under menu

[Helaine Bader]

Hi Bill,
I was wondering if you could help me with one thing on my site. I wanted to add a line underneath the menu on the internal pages to separate it out from the title and page content. I have a pink line on my home page under the menu; however, the line is part of the graphic in the slideshow. You can see what i mean if you look at the site – http://www.helainebader.com. Is there anyway to add this pink line so that it looks like it’s part of the header/navigation bar and stays consistently in the same place?

Thanks so much!
Helaine

[Bill Robbins]

Helaine,

Great question there. You can do that by adding a border to the bottom of the header. Here’s how:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .page #header {
   	border-bottom: 6px solid #D03B71;
   	min-height: 140px;
   }
   
   .home.page #header {
   	border: none;
   }
   

3. Update your settings.

The top style there adds in the border. You can adjust its color and size there. It also changes the minimum height a bit which will determine how tall it is on your inside pages.

The second style will remove the border on your home page.

If you run into any questions or trouble, just let me know.

Thanks,
Bill

[Author]

Posts