It is common practice to make a Donate button stand out by giving it a different color on a web site. Is there an easy way to customize the color on just one of the supporter nav buttons?
The supporter nav buttons are designed for this purpose, as they usually stand out more than anything else on the site. However, if you have a custom theme, you can edit either layout.html or _nav.html and use CSS to float a donation link or button to the right of your nav. You can then use CSS to style it however you would like.
To change the color of just one button, change the div which surrounds it from “submit_link_huge” to something unique like “donate_button_red” and then copy the following code to your theme.scss file, changing the color hex code to whatever color you want (this will make it red):
.donate_button_red a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors(#d60101, darken(#d60101, 5), darken(#d60101, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
Showing 18 reactions
Sign in with
Hines Digital
Certified Architect
Certified Expert
Hines Digital
Certified Architect
Certified Expert
#topnav a[href*=“donate”] { background: #fff; }
Obviously modify it to the color that suits you, and change “donate” to the proper slug for your contribution page.
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer
.donate_button_red a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors(#d60101, darken(#d60101, 5), darken(#d60101, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
Putting the button in the supporter nav is not terribly useful. We’ve got a lot of people who will not want to “sign in” and give information. We want to get them to the donate page quickly and clearly, with a minimum number of clicks.
It would be useful if we could get a piece of code that started with
(if the button is = ‘donate’ or some other slug, then)
(here’s the code to change that button)
If you can include the code to make that button sit on the right side of the top nav instead of put with all of the others, that would be even better.
.submit-button-huge, .submit_link_huge a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
http://richiroutreach.com/blog/customizing-nationbuilder-sidebars
http://richiroutreach.com/blog/advanced-customization-nationbuilder-sidebars