Donation button

[Anastasia Connor]

Hello again,

Firstly, thank you for your great support so far. I’m working on a charity website so donation functionality is very very important to us. To make it very visible and would like to add a donation button to the navigation bar. Is it possible?

Also, I can’t seem to work out how to add our logo and strap line to the banner. I’m assuming it’s doable, right?

Thanks again for your patience and help.

Ax

[SamV]

Hey Anastastia,

If you go to Appearance > Customisation you can add the logo etc to the Branding section.

As for donations link, if you go to Appearence > Menu. Then select the Main Navigation Menu. The on the left hand side under products you’ll find your donation page, ie I’ve renamed mine to Standalone Donation, click on the tick box and click add to menu. Drag it to where you want and then click save.

[Bill Robbins]

Good Afternoon Ax,

Also a good question there. What I would do is add a link in your navigation menu to your main donation “product” if you’re using WooCommerce to collect money. You can also create a link to any URL if you’re using a different option.

Once the new item is added to the menu, you can add a “class” to it that can be used to style this item as a button. To add a class to the menu item, click the screen options tab in the top right hand corner of the menu builder screen. Make sure the box next to css classes is checked.

Then click on the down arrow on the right hand side of the menu item. That will open up options for this menu item. In the box for css classes add button as the class. Then save your menu.

You’ll likely need to tweak that style just a bit. Here’s what I would do:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   nav li.button {
   	padding: 0;
   }
   
   nav li.button a {
   	color: #000;
   	background-color: #fff;
   }
   
   nav li.button a:hover {
   	background-color: #000;
   	color: #fff;
   }
   

4. The middle style there will set the colors of the new menu button. Feel free to change those to fit your needs. The last style there sets the colors of the hover state. Change those to fit your site too.
5. Save your changes.

That should give you a menu “button” to work with now.

Let me know if you run into trouble there,
Bill

Attachments:

1. 

   Screen-shot-2015-04-09-at-2.12.29-PM-494-x-345.png
   

[Anastasia Connor]

Bill,

You’re a legend! I’m looking for a photography site theme for a friend and a personal profile (I’m a comms/journalism person). Would be very interested in more of your themes.

Donation button is ace but is there any way of making the background colour different from the rest of the buttons on the navigation bar.

Massive thanks for your help as well, Sam.

Anastasia x

[Bill Robbins]

Glad to help out. You can have different colors. In the snippet above:

nav li.button a {
	color: #000;
	background-color: #fff;
}

nav li.button a:hover {
	background-color: #000;
	color: #fff;
}

The top style here is for the button in its normal state. The #fff there is for the background color. You can replace the #fff with the color of your choice to change the background. The #000 in the first style is the text color. You can change it as well.

The bottom style sets the hover color for you button. You can change those to fit your needs too.

Let me know if you run into trouble,
Bill

[Author]

Posts