[Resolved] Promotion notification bar

Home Forums Support [Resolved] Promotion notification bar

Home Forums Support Promotion notification bar

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #904998
    Nacho

    Hello,

    I remember you had at some point a promotion bar or notification bar before the menu on your website for a sale and I was wondering how could I make that for my page.

    How did you insert that before the header or the menu? Is that a particular feature of GP Premium that I missed?

    Thanks a lot.

    #905119
    David
    Staff
    Customer Support

    Hi there,

    you can use the Top Bar widget area:

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

    #905128
    Nacho

    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.

    #905167
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #918627
    Nacho

    Hello David,

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

    Thanks a lot.

    #918639
    Leo
    Staff
    Customer Support

    Give this CSS a shot:

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

    Hello Leo,

    It works perfectly, even in mobile.

    Thank you so much!

    Have a nice day.

    #918655
    Leo
    Staff
    Customer Support

    No problem 🙂

    #919266
    Nacho

    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.

    #919355
    David
    Staff
    Customer Support

    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;
    }
    #919362
    Nacho

    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.

    #919369
    David
    Staff
    Customer Support

    Glad we could be of help

    #919650
    Nacho

    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.

    #919673
    David
    Staff
    Customer Support

    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

    #919687
    Nacho

    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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.