Nelson you rock!! Awesome. Thank you so much for helping all of us get a step further in our design work. You don’t have to share your knowledge but you choose to. Appreciate you bro ✌🏾
Thank you for this tutorial, it really helped! Tbh honest I skipped it like 5 times because it didn't have "Cookie notice" in the title, but as it turned out it was the perfect video for my problem. Greetings from Austria
This is STELLAR Nelson, thank you for sharing! Love these examples that show how a little custom code can really go a long way to create powerful solutions that aren't technically native within Webflow, but still totally possible and take the platform so far beyond just creating layouts!
@@pixelgeek one other random thought on this? Is there a way to expand upon this concept to create a full list of past notifications? Obviously if each notification is already a collection item it would be simple to create a list to display them all somewhere, but is there a way to hook it up so once the user clicks the close (or any) button in the notification it makes it disappear and then it only appears in the full list of past notifications? It seems like the custom JS would have to be able to change a 'switch' in the collection item from live > past instead of manipulating the cookie or something along those lines?...not sure you can manipulate the CMS that way, but maybe you could with the API/Webhooks?
@@coreymoen You actually can do it using the Webflow API, it will require some Ajax ( if you already use Jquery then you will be fine ), here is a link for the webflow API documentation where it shows you how to interact with the collection lists developers.webflow.com/?shell#cms-api-reference
I'm still fumbling around Webflow a bit, trying to get this to work. It all makes sense, but I'm trying to add it above my navbar symbol. I've set the notification bar in Fixed position, but it's sitting on top of the Navbar. What should the position be of the Navbar be? I tried Relative (but it's only Relative to itself). Thanks!
Actually think I worked it out. I created a symbol for the notification bar (and pasted that on every page) and then just chucked the code in the project settings custom code. Seems to be working fine!
Nelson, this tutorial is exactly what I needed. Thanks for making it! I implemented this on a site for a client of mine, but can't get the cookie to work properly. I pulled the code you used in and updated the class names, but it's still not working. Would you mind taking a look at my read-only link to see if you can spot an error?
After dismissing the banner (and adding cookie to browser) the banner still shows up for a split second and then it's hidden. It's really distracting when going from page to page because it appears every time the page loads. Any way to prevent it from appearing altogether if the cookie is present?
Anyway to get the alert bar to push the content down when open? I have a fixed nav that I'd like push down when the alert bar is open and slide up when the alert bar is closed.
try: 1) setting the bar to position:static 2) set the overflow to hidden 3) make a page load interaction that starts the bar as height:0px then let it animate to height:auto tope this helps :)
Hi Pixelgeek - when i export the code from webflow to upload to my own server via FTP this feature no longer works. I just get a message at the top of my website that says "no items found". any ideas whats gone wrong?
CMS and Ecommerce content (databases) aren't exported. Collection lists will show the empty state. Collection pages will also not show any content that's bound to Collection fields as well. If you want to use the webflow CMS, you need to host your website in webflow
Nelson you rock!! Awesome. Thank you so much for helping all of us get a step further in our design work. You don’t have to share your knowledge but you choose to. Appreciate you bro ✌🏾
Bro, thank you soooo much! I couldn't find a solution to integrate a cookie bar on WF. Now i am able because of you.
Glad I could help!
Thank you for this tutorial, it really helped!
Tbh honest I skipped it like 5 times because it didn't have "Cookie notice" in the title, but as it turned out it was the perfect video for my problem.
Greetings from Austria
Hey thank-you so much for this tutorial! This is exactly what I needed for a client project and they're tickled to have a neat little banner up top.
You're very welcome!
Thank you a lot. God bless you.
Thanks so much for posting this! Super helpful and very clear!
You're very welcome!
This is STELLAR Nelson, thank you for sharing! Love these examples that show how a little custom code can really go a long way to create powerful solutions that aren't technically native within Webflow, but still totally possible and take the platform so far beyond just creating layouts!
Yup! If you know a little bit of jQuery, there are so many new doors opportunity for you when you combine it with Webflow 😁
@@pixelgeek one other random thought on this? Is there a way to expand upon this concept to create a full list of past notifications? Obviously if each notification is already a collection item it would be simple to create a list to display them all somewhere, but is there a way to hook it up so once the user clicks the close (or any) button in the notification it makes it disappear and then it only appears in the full list of past notifications? It seems like the custom JS would have to be able to change a 'switch' in the collection item from live > past instead of manipulating the cookie or something along those lines?...not sure you can manipulate the CMS that way, but maybe you could with the API/Webhooks?
@@coreymoen You actually can do it using the Webflow API, it will require some Ajax ( if you already use Jquery then you will be fine ), here is a link for the webflow API documentation where it shows you how to interact with the collection lists developers.webflow.com/?shell#cms-api-reference
This was very helpful. Thank you a lot!
My pleasure. Glad the video helped. 😁👍🙇🏽♂️
That was awesome !! Thank you so much
You are so welcome!
Very useful tutorial. Thanks Nelson
My pleasure 😁👍
Tried to find your project to clone and copy the script, but seems to be gone now. Thanks anyway.
I'm still fumbling around Webflow a bit, trying to get this to work. It all makes sense, but I'm trying to add it above my navbar symbol. I've set the notification bar in Fixed position, but it's sitting on top of the Navbar. What should the position be of the Navbar be? I tried Relative (but it's only Relative to itself). Thanks!
How does the enable/disable button work? Will the whole bar disappear when disabled?
Is there a clonable version of this somewhere? Please?!
How can you set it so that it shows on all pages? Or do you have to add to each separate page?
This is amazing, thank you for sharing! Just checking - does this work site-wide or does it need putting on every page?
Actually think I worked it out. I created a symbol for the notification bar (and pasted that on every page) and then just chucked the code in the project settings custom code. Seems to be working fine!
glad you found the solution :)
Nelson, this tutorial is exactly what I needed. Thanks for making it! I implemented this on a site for a client of mine, but can't get the cookie to work properly. I pulled the code you used in and updated the class names, but it's still not working. Would you mind taking a look at my read-only link to see if you can spot an error?
Also, pinged you here in the Webflow forum if you'd prefer to handle this there. : ) forum.webflow.com/t/cookies-notification-bar/102660/3
After dismissing the banner (and adding cookie to browser) the banner still shows up for a split second and then it's hidden. It's really distracting when going from page to page because it appears every time the page loads. Any way to prevent it from appearing altogether if the cookie is present?
Please is there a clonable version somewhere? Thanks!
You still can get the script from the live site, use the dev tools, you'll find the script at the end just before the tag.
Hey Nelson, can I turn the notification bar into a slider? Thanks a lot for the tutorial, really awesome!!
not sure what you mean. can you explain further?
@@pixelgeek hey, got it right, no worries! Basically I wanted something similar to this: tailoredpet.com/
Hey Nelson, thanks for this! Could this be created to move the Navbar items down when the bar is active?
Yes. Let me find a tutorial to help you
Here you go. ruclips.net/video/mdlTtf1qixI/видео.html
@@pixelgeek Oh man, you're the best Nelson! Thanks and Happy New Year :)
Anyway to get the alert bar to push the content down when open? I have a fixed nav that I'd like push down when the alert bar is open and slide up when the alert bar is closed.
try:
1) setting the bar to position:static
2) set the overflow to hidden
3) make a page load interaction that starts the bar as height:0px then let it animate to height:auto
tope this helps :)
is it okay if I keep the code in Embed component so that it will be easy to copy in other project?
well I tried, but code did't work, it should be in before body tag
Thanks but how does the 'Button Link' actually link to anything if it's just called 'Button Link', not the actual URL?
It's okay, missed the detail between 'Collection' and each individual Thing
glad you figured it out :)
Hi Pixelgeek - when i export the code from webflow to upload to my own server via FTP this feature no longer works. I just get a message at the top of my website that says "no items found". any ideas whats gone wrong?
CMS and Ecommerce content (databases) aren't exported. Collection lists will show the empty state. Collection pages will also not show any content that's bound to Collection fields as well.
If you want to use the webflow CMS, you need to host your website in webflow
@@pixelgeek ah i did wonder if that was the issue. Thanks for coming back so quickly. And keep up the good work
My pleasure 😁
How can I copy code?
Great!
Having a hard time finding the code... Tried your other video' s code... didn't work for me. Any change anybody could help?
you can clone the project here:
webflow.com/website/overflow-notification-bar
hope this helps :)