Love the bootstrap interface - One compelling feature that is offered “built in” to WordPress and other web builders that I have not yet seen using RapidWeaver and the Foundry suite of functionality is - where a large logo either in the center of the screen or larger than “normal” in the top left shrinks down to a minimalistic size as the user scrolls down the page, thereby animating the brand and making people scroll up and down just to watch the cool effect.
Quite a lot of sites use this feature which makes branding memorable. Equally, many people offer CSS additional code to enable this on most sites. html code shrink logo on scroll at DuckDuckGo
When I try to use this in RapidWeaver using Foundry, it won’t work the way I need.
I asked this question in another topic post here in the Foundry section and was told that this might be possible using a separate stack at the top which might make this work. I’m wondering if anyone has had any success with a workaround or a separate stack using RW and the Foundry Theme / suite of capabilities.
This is a huge thing for us and I suspect many people would use this feature if it was available.
Thanks.
Hey there @rebdaniel – I believe the stack that @webdeersign linked to should work to do what you’re looking to do. I’ve not used it myself but I think @webdeersign has. That being said, I’m not opposed to having something built-in to Foundry like this in the future, it just would be in a separate, specialized navigation stack. Give the stack that @webdeersign linked to a try and see if it doesn’t fulfill your need.
Thanks - We tried what @webdeersign recommended but found that our logo is so small initially when inserted into the nav bar, (it can’t be displayed in it’s original size), that it’s practically unreadable to begin. Then it shrinks down to an even more unreadable size. How do I get my logo to appear in it’s intended size (330 w ; 215 h) before it starts to shrink down? Am I missing something which allows me to put in a larger logo? It’s all about the branding.
Your logo cannot go bigger than what is set in Nav Bar which is 78px I believe when Nav Bar is set to 80px high. However, the effect you refer to is a bit of an illusion because often the image appears bigger because extra padding is added top and bottom.
If you want to use a bigger "logo"then remove the logo from Nav Bar area and add your own logo as an image on top of the Nav Bar and treat the Nav Bar as a component of the overall navigation menu. Using one of the many stacks that can position images or use a couple of lines of CSS to do this.
PS If you know how to do some code this is a very easy exercise but if you don’t and want to build it with RW components then it will take some figuring out how to make it all work at all screen sizes. Nav bars are one of the most complex components in a web page and using a large image will create many issues that need to be addressed such as resizing the logo and adjusting the padding for different screen sizes. Th solution is way more than just make the logo bigger.
The logo is pretty intricate. It will be hard to read at most sizes if placed within a navigation bar of any kind. I tend to agree with @webdeersign here in that it would better showcase, and render more readable, placed just about anywhere but in a navigation bar. I don’t know that increasing the Navigation Bar stack’s height is the solution for this one, personally.
Yup. That’s why we are trying to initially display it at its full size, then shrink it down out of the way when scrolling. This is the first unfinished attempt to display it. You can see how it prevents people from seeing content as they scroll. http://southernlegacyfoods.com Here, you can see the logo in a banner at the shopping site: https://southernlegacy.luluslocalfood.com/Shopping/Search
Scrolling which causes shrinking is the best way to utilize the logo for how it was created, it appears. The question is, how?
I agree completely. The Chroma solution looks very promising, and I’ve got a workaround to help with the animation, but the full sized logo doesn’t shrink when it moves: In the General Settings, I put an html line in the “Title” to display the img src=… etc. Then under Page Settings > Branding, I checked Branding Type: Site Title. This made the logo appear full size and animated with Chroma’s cool marker solution. The only thing it won’t do is shrink the logo to fit within the smaller nav bar.
What if we use two logos: One full size displayed below the nav bar in a stack, which Chroma then pulls up and away with a marker upon scrolling, and the second one materializing upon scroll in the nav bar in its “shrunken” state of say 80px? Is there a way that you know that Chroma could accomplish this?
Second question: Is there a resource out there where we could hire a job like this a la carte so that we can spend our time developing other aspects of the business? We couldn’t afford a lot, but it might be worth considering.
