Skip to main content

How can I edit the donation progress bar in CSS to make it vertical?

I am viewing the CSS for my theme and wish to edit the donation progress bar with a simple vertical statement but am experiencing problems. Can you advise?

Official response from

It sounds like you are trying to make the progress bar appear vertically instead of horizontally. Unfortunately there is not a simple CSS attribute that you can apply that just flips the bar so that it appears vertically. Instead, that progress bar is composed of three different <div>'s -- one that contains the progress bar and goal text, one within that one that contains the full progress bar, and a third one within that one that contains just the green (filled) portion of the progress bar. They all have a static height and the first two have a static width, but the third one has a dynamic width that is controlled by a liquid variable in the HTML. All of that can be found on lines 337-351 of your donation page template.

Regarding the CSS behind that bar, it is found in the Theme.scss file and applies to the ".progress .bar" class.

To get this to appear vertically, you would need to change all of this, making for a static width and for that liquid variable to define the height of the third <div>, which should then float to the bottom of the div that it is in (rather than the left side). This would be a pretty complicated change, but it is possible. If you'd rather pay someone else to do it, I recommend checking out our listing of NationBuilder-certified Architects (web developers) at nationbuilder.com/architects or crew.co/nationbuilder.

Share this post

Showing 1 reaction

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.