This is a 2 part question:
1) I tried to follow the instructions in http://nationbuilder.com/61410/customizing_color_for_a_single_support_nav_button to change the color and alignment of the donate button, but it didn't work. I must be missing a step
2) How do I change the alignment of the Nav bar so the links go evenly across the bar instead of being left aligned?
I tried to edit it in the theme css but it didn't work
Hello Krista,
1) The directions you are referring to are to change the color of the button in the supporter nav which requires you to edit the code. In your case, you want to go to Websites > Theme > _columns_2.html and find:
{% if site.has_button1? %}
<hr />
<div class="submit_link_huge"><a href="{{ site.button1_page.full_url_with_profile_recruiter }}">{{ site.button1_text }}</a></div>
{% endif %}
You have to change the div class from "submit_link_huge" to something unique, and then add that style to your theme.scss file located under Pages > Theme. Please review the directions outlined in the FAQ you mentioned above, as they contain sample CSS as well.
2) The top nav is centered, and its elements are set to float: left. There are a few ways to adjust the nav bar's alignment. In your case, if you don't plan on adding any more items to the nav, you can simply adjust the margin of your nav bar to something like: ul#topnav {margin-left: 165px;} or, to center the whole nav bar you can add these styles to your theme.scss file:
ul#topnav { float: none; text-align: center;}
ul#topnav li { float: none; display: inline-block; }
You may want to adjust other CSS styles, like maybe setting the ul#topnav height to 45px so that it aligns nicely.
For other methods, you can read up on how to center nav bar elements, using a table in your nav, and spreading out elements across the nav bar. You can also run your question by a search engine for other options. If you'd like additional help from a consultant, you can find a list of certified NationBuilder Architects here.
Thanks.
Showing 2 reactions
Sign in with