@HostNottingham You'll need to add some css code to modify the background color of the "Donation" menu item. I'm going to assume that this menu item will always occupy the last position in your navigation menu (this is typically where your menu button items go) and so we'll target the last menu item (regardless of what it is; so, if you add more pages, just put them in a location other than last place).
You'll want to add this code to your site's css code (Theme > Edit HTML/CSS):
.wsite-menu-default li:last-child {
/* Modify last menu item's background color to brand green and change font color to white */
background: #3cba13;
color: #ffffff;
}
.wsite-menu-default li:last-child:hover {
/* Modify last item's hover state background color to black */
background: #000000;
}
.wsite-menu-default li:last-child:hover a {
/* Override default menu link opacity change on hover (so that menu text remains white on hover) */
opacity: 1!important;
}Your donation nav menu item should now look like this:
And, it'll look like this when you hover on the Donation menu item:
@HostNottingham You'll need to add some css code to modify the background color of the "Donation" menu item. I'm going to assume that this menu item will always occupy the last position in your navigation menu (this is typically where your menu button items go) and so we'll target the last menu item (regardless of what it is; so, if you add more pages, just put them in a location other than last place).
You'll want to add this code to your site's css code (Theme > Edit HTML/CSS):
.wsite-menu-default li:last-child {
/* Modify last menu item's background color to brand green and change font color to white */
background: #3cba13;
color: #ffffff;
}
.wsite-menu-default li:last-child:hover {
/* Modify last item's hover state background color to black */
background: #000000;
}
.wsite-menu-default li:last-child:hover a {
/* Override default menu link opacity change on hover (so that menu text remains white on hover) */
opacity: 1!important;
}Your donation nav menu item should now look like this:
And, it'll look like this when you hover on the Donation menu item:
Thanks for this code! But How to you fix alignment issues? It doesn't look like a button. It looks like a weird background has been filled in. Seems like padding or margins, or radius or something also needs to be defined.. any help would be appreciated. 
You have to define it in the code editor (approx line 225) this is the code that you'd want to use (change the hex codes as you need). NOTE - This code needs to replace any duplicate code. This code will also give you a nice border on hover. 
#nav > ul li:last-child a {
padding-right: 20px !important;padding-top:20px; padding-bottom:20px; background: #b914fa;
color: #ffffff;
}
#nav > ul li:last-child:hover a {
background: none; border: 2px solid #b914fa; color: #b914fa
}
What's the code for when you are "active" on the page? My text disappears and the hover for "active" is different as well. Any help is appreciated.
