New Responsive Advocacy Kit Is LIVE!

Caroline Stuart-Freas

Hi all -


I wanted to post this Advocacy News blog post as new discussion as well to make sure that you all saw it.


My BB colleague, Shiloh Daniel, created a new responsive advocacy kit for our Luminate Online Advocacy clients. Create responsive one-step advocacy alerts with this new kit, which also includes a responsive wrapper! Create responsive one-step advocacy alerts with this new kit, which also includes a responsive wrapper!


You can see more information from Shiloh and the kit here: https://community.blackbaud.com/blogs/71/2760

Bev Stanton

I am so excited about this update!! The documentation is excellent and I found the instructions easy to follow.


i had to make a few tweaks to get it to work and wanted to share in case others experience trouble. To get the hamburger to display on mobile view i needed to place the


.navbar-toggle {display:inherit;} line within the mobile media query (@media (max-width: 767px))


(Also I added a &mobile=1 argument at the end of my test page url during testing to be able to inspect the mobile display)


For the logo i used a class of "navbar-left" instead of "navbar-brand" since the logo is taller than the navbar.


here is a demo page i set up for testing

https://secure.npca.org/site/Advocacy?cmd=display&page=UserAction&id=1339


This will be really helpful in getting us started in redesigning our wrappers!


Thank you Shiloh for putting together this code and documentation!!

Shiloh Fallon

Thanks so much, Bev, for trying out the new kit! We are so glad that you liked it!


Based on your feedback, I have updated the kit so that it now has two versions of the code- one for a wrapper with a top nav and one without. Hopefully this will make it easier for future users!