Oh shoot, I was just about to get started on this tutorial and realized there are no instructions on how to create the promo bar itself. You say use the Theme Builder, but then I don't see how to create the bar above the global header, which is what I'm trying to do. I see a Divi tutorial on how to create a promo bar, but theirs lands below the header. Do you have a tutorial on how to get it up above the global header?
Doesn't work for the two people who have attempted it. I have tried putting the JS in the head, the body, on the page itself as a code module and in the theme builder itself as a code module. The "X" appears fine, but it doesn't shut. pa-promo-close is in the CSS ID for that text module pa-promo-bar is the CSS class for the section The hover effect works fine with the CSS code, but it doesn't shut at all. I notice the script you use in the video is different from what is currently on the blog also.
Who do you mean by the two people? Yes the code in the blog is different than the video, we updated it. It is correct and it does work as I've used it several times myself lately.
@@PeeAyeCreative I mean I tried it on a site I was working on. It didn't work for me. Another person tried it on another site and it didn't work on that one either. The second one she asked me to try to look and see if it was implemented correctly. It seemed to be. When I say two people have tried, I mean two people have tried on two different sites both running Divi. I am not saying it doesn't work. I am saying it didn't work for the two people who tried it, including myself.
@@healthmain @Pee-Aye Creative It doesn't work for me either. I am using the Elegant Themes Divi Child theme. The menu bar is not located in the Global Header. When I put the promo bar in there, the promo bar replaces the menu bar instead of pushing the menu bar down. In addition, I added the code from your article just like you said and I could not get the promo bar to close either. Any suggestions?
Hi Michael, it's just in the builder, it has something to do with how the Visual Builder React code renders the icon font. It's no big deal since it still displays in the frontend as an X.
What if I don't have a global header and I don't have the option or time to make one. The video goes from, if you already have a global header use that. And then you don't say about what to do if you don't. Can this built without using a global header?
Hi Nelson, thanks for another great video. I currently have a site that I want to implement this on, but the header is not built in the Divi Builder. It's just built through the theme options with some minor CSS modifications. Is there a way to implement this promo bar globally if my header is not built in the Divi Builder?
Hi Ben, the core of this tutorial uses the Theme Builder, so that's the only way. I'm sure there are other ways to do something similar but with a separate plugin I believe.
It doesnt work. The js code and promo close is definetly diferrent. In the video you put it to class not ID, the js code is not the same as on your blog.
I am afraid that the code doesn’t work anymore, however the last code it works, i tried so here is the solution: jQuery(document).ready(function(){ jQuery(' #pa-promo-close').click(function(){jQuery( '.pa-promo-bar') .hide(); }); });
This is actually the best channel for divi tips! I absolutely love it, I appreciate it so much, thank you a lot.
Thank you so much! That's a great comment and we are so glad you like our tutorials!
Close button is not working. How to set the cookies functionality? Any idea how to make it work?
Most useful channel for fast Divi tips and tricks. God bless you Nelson.
Thank you, that means a lot! God bless you as well!
Oh shoot, I was just about to get started on this tutorial and realized there are no instructions on how to create the promo bar itself. You say use the Theme Builder, but then I don't see how to create the bar above the global header, which is what I'm trying to do. I see a Divi tutorial on how to create a promo bar, but theirs lands below the header. Do you have a tutorial on how to get it up above the global header?
This is really smart. :) Why did I just see this now?
Yes it works great, the Theme Builder is so cool.
Thank you so much Nelson! You are a life saver!
You're welcome!
I am SO GRATEFUL for this video. Thank you so much for making my life 9384x easier! Hurray for custom-designed top bars! Woot woot!
Hi Mara, you are very welcome, it's my pleasure. I'm excited to see this being so useful for you!
Thank you, very helpful!
🤯 excellent tutorial thank you very much !!!
Glad you enjoyed it!
Doesn't work for the two people who have attempted it. I have tried putting the JS in the head, the body, on the page itself as a code module and in the theme builder itself as a code module.
The "X" appears fine, but it doesn't shut.
pa-promo-close is in the CSS ID for that text module
pa-promo-bar is the CSS class for the section
The hover effect works fine with the CSS code, but it doesn't shut at all.
I notice the script you use in the video is different from what is currently on the blog also.
Who do you mean by the two people? Yes the code in the blog is different than the video, we updated it. It is correct and it does work as I've used it several times myself lately.
@@PeeAyeCreative I mean I tried it on a site I was working on. It didn't work for me. Another person tried it on another site and it didn't work on that one either. The second one she asked me to try to look and see if it was implemented correctly. It seemed to be.
When I say two people have tried, I mean two people have tried on two different sites both running Divi.
I am not saying it doesn't work. I am saying it didn't work for the two people who tried it, including myself.
@@healthmain @Pee-Aye Creative It doesn't work for me either. I am using the Elegant Themes Divi Child theme. The menu bar is not located in the Global Header. When I put the promo bar in there, the promo bar replaces the menu bar instead of pushing the menu bar down. In addition, I added the code from your article just like you said and I could not get the promo bar to close either. Any suggestions?
same here, that section does not hide. Added code to child theme, and doesnt work either.
I noticed that the only browser this solution not working is Microsoft Edge
I guess i must be doing something wrong cause on my divi theme builder that code is making a M letter
Hi Michael, it's just in the builder, it has something to do with how the Visual Builder React code renders the icon font. It's no big deal since it still displays in the frontend as an X.
This is what i need. Thanks!
I knew this is going to be helpful! Glad it fit your needs so week!
Hi, thank you for the share I was able to add the alert bar :) but it makes my nav bar disappear as a result. Any suggestions?
It sounds like your Menu module is within the promo bar section? Is that why?
The code you inputted here for the "X" (and also displayed on your blog) showed up as an "M" for me. I used this code instead for an "X" to show up: X
Okay not sure why, glad it worked!
Hi! Great tutorial! However, when I add it the notification bar covers the menus, any idea why?
Hi Gordana, I'm not sure what you mean. Can you show me?
she means that covers the header
LOVE YOU 😍 perfect 👌 tutorial
Thanks! 😊 I'm so glad you like it!
Hi, Can you please share the list of Divi fonts icons codes?
Never mind. got the code. Thanks for the wonderful tutorial.
You're welcome!
This bar shows up instead of my divi menu. How do i fix it?
Can you elaborate on this question?
If i want to do that bar 2:10 how i do it?? I got the Divi pro
Sure, is there any specific question you have? You can just add the module in the Divi Theme Builder as shown in the video.
What if I don't have a global header and I don't have the option or time to make one. The video goes from, if you already have a global header use that. And then you don't say about what to do if you don't. Can this built without using a global header?
The tutorial would be impossible and irrelevant without using the Theme Builder. When that is used, the regular header hides.
Hi Nelson, thanks for another great video. I currently have a site that I want to implement this on, but the header is not built in the Divi Builder. It's just built through the theme options with some minor CSS modifications. Is there a way to implement this promo bar globally if my header is not built in the Divi Builder?
Hi Ben, the core of this tutorial uses the Theme Builder, so that's the only way. I'm sure there are other ways to do something similar but with a separate plugin I believe.
It doesnt work. The js code and promo close is definetly diferrent. In the video you put it to class not ID, the js code is not the same as on your blog.
i thought this was going to be a tutorial on how to create a promo bar not how to add functions to a already made promo bar
I'm not sure what you mean. I thought your comment was going to explain what you mean is missing.
I am afraid that the code doesn’t work anymore, however the last code it works, i tried so here is the solution:
jQuery(document).ready(function(){
jQuery(' #pa-promo-close').click(function(){jQuery( '.pa-promo-bar') .hide();
});
});
How to set the cookies functionality? Any idea how to make it work?
Works fine, thanks! But the Bar reappeard on every pageload. This is annoying for page visitors -.-