navagation bar

[steve rawlings]

Hi Bill,

I have a few things I am having trouble getting done.

1) Is it possible to eliminate the space between the navigation bar and slider/logo?

2) I would like to have a multiple colored navigation bar with the words centered in each tab. Mostly, I would like to make the “donate” tab a different color.

3) How can I change the dotted line between tabs to a solid line and make it larger?

Thank you for your help. I am very new to website development, but really enjoy working with your templates.

Best regards,

Steve

[Bill Robbins]

Good Morning Steve,

Good questions. I believe we can make this work for you. Here’s what you’ll need to do:

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

   
   body div.wrap {
   	top: -19px;
   }
   
   li#menu-item-242 a {
   	background-color: #000000;
   }
   
   li#menu-item-242 a:hover {
   	background-color: #cccccc;
   }
   
   header.primary .menu li a,
   header.primary .menu li a:visited {
   	border-right: 2px solid #cccccc;
   }
   

   The top style there will remove the space between the logo and the top of the site’s content. The next two styles will set your donate link to have a background for both the normal state and the hover one. The last one will change the border between items from a dotted line to a solid one and also make it a bit thicker. Change the colors to match what you need them to be.

3. Update your settings.

Let me know if you have any questions.

Have a great week,
Bill

[steve rawlings]

Hi Bill,

1) I am wondering if the blue colored area to the right of the gold “Donate” can be gold also?

2) Is it possible to change the background color of the drop down menu?

Thanks for your support,

Steve

[Bill Robbins]

Hello Steve,

You can change the color of your drop-down menu. Add this to your Custom CSS too:

body.light header.primary .menu li ul {
	background-color: #efefef;
}

and replace the #efefef with the color you’d like to have there.

While you can’t make the area next to the donate button gold, one option would be to move the button to the right hand side. Here’s some custom CSS you could use to do that:

nav#top-menu {
	width: 100%;
}

header.primary li#menu-item-242 {
	float: right;
}

li#menu-item-353 a,
li#menu-item-353 a:visited {
	border: none;
}

Let me know if you have any questions,
Bill

[Author]

Posts