Promotion notification bar

Hi there,

you can use the Top Bar widget area:

https://docs.generatepress.com/article/top-bar-widget-area/

Hello David,

I´ve been checking everywhere and I did not see that.

Thanks a lot David, clearly you know this really well :)

Have a nice day.

Glad to be of help :)

Hello David,

Is it possible to make the sticky top bar like the elementor.com website have right now?

Thanks a lot.

Give this CSS a shot:

.top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 99;
}

Hello Leo,

It works perfectly, even in mobile.

Thank you so much!

Have a nice day.

No problem :)

Hello Leo,

Is there anyway to hide the topbar only on a particular page and on mobile? I´ve been checking the documentation but I can´t find it.

Thanks a lot.

This CSS to remove it on mobile:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

And this CSS to target a specific page to hide it on - update the xxxx to match the ID of the page:

.page-id-xxxx .top-bar {
    display: none;
}

Hello David,

I´ve combined both codes and it works perfect. Super helpful as always.

@media (max-width: 768px) {
   .page-id-XXX .top-bar {
        display: none;
    }
}

Thanks a lot.

Glad we could be of help

Hello David,

I´m facing an issue since I´ve put in the topbar an elementor section but on page load it does a weird thing showing in almost a second different colors on text and in the button (URL in the post).

I´ve contacted the elementor team and they told me that it´s related to the way GP loads the CSS but I don´t know how to solve this situation.

Is there anything I can do to solve this weird behaviour?

Thanks a lot David.

You have to love Elementor Support......

Instead of using the Top Bar.
Do this instead:

1. Appearance > GeneratePress and activate the Elements module.
2. Appearance > Elements > New Hook.
3. Add your Elementor Shortcode
4. Select the before_header hook from the hook list
5. Check the Execute Shortcodes
6. Set you Display Rules > Location to Entire Site.

If you gave your Section a Class in Elementor then you can use that class to hide it on mobile.

The hook doesn't have any CSS ( unlike the topbar) so if the flash of different styling occurs then its down to how Elementor

Hello David,

I´ve followed the instructions and done it but the issue is still happening.

Let me know what I can do.

Thanks a lot.