I'm working on a custom theme based on "Collective". I like the header resize after scroll but would like to not have it resize as much. As it is, our logo becomes too small. I think I see where this function is in collective.js but don't see how to adjust the resize percent. I would like the resize to be about 50% less.
As it is...
Before Scroll... <nav id="menu" role="navigation" style="height: 150px;">
After Scroll...<nav id="menu" role="navigation" style="height: 0px;">
Here's our test site. http://scratch-wcdp.nationbuilder.com/
Any thoughts on how I might proceed?
Also is the a way to switch from one logo (say mark with text) to another (maybe just the mark) on scroll and also maybe when the page is on mobile? When I say mark, I mean like your buildings doodad.
Thanks, Bob
As you've noticed, that height attribute gets set to 0px after the scroll, so the actual height of the container is then defined by the height of the contents in it. Specifically, the <ul id="topnav" class="topnav desktop-nav"> element has padding that is set up on line 347 of the Tablet-and-desktop.scss file, which looks like this:
padding: 1.25em 0 1.25em 1.25em;
If you set the top and bottom padding to 0, that whole container will be about half the size that it currently is when you scroll down the page.
Changing the icon that is used when the page scrolls down will require a modification to that Collective.js file as well, but I'm not quite sure about the change, as I need to sharpen my JavaScript skills yet. If you'd like help with that, I recommend reaching out to a NationBuilder certified Architect at nationbuilder.com/architects.
Showing 4 reactions
Sign in with
The logo is left justified. I wasn’t able to figure out how to get it to scale down in a centered manner, but you can center the container itself by setting the width of the <a> tag that surrounds the logo to the width of the logo and applying a “margin: auto” style to it as well.</a>
I tried this… padding: 0 0 0 1.25em; Logo almost disappears. Is that what you meant?
padding: 2em 0 2em 1.25em; doesn’t look bad.
One other thing, the logo seems to be justified left. Is there a way to have the element centered so the zoom effect is straight back and not moving to the left as the size diminishes?