Is it possible to display the notification bar with shortcode?

  • Resolved Mare13ki

    (@mare13ki)


    4 months, 2 weeks ago

    Hi, I am having trouble with making notification work with sticky header. It is working normally with regular header, but notification bar is overlapping the sticky header, it is not a z-index issue because I need notification bar to push sticky hearder down so they are one below another but it can’t push it because both are “position: fixed”

    I am using Elementor.

    I can add “top: 70px” for example on my sticky header, and there is a room for notification bar above and they are not overlapping, but there is an issue – if there is a cookie active, and notification bar should not appear that “top: 70px” CSS will stay anyway, and my sticky header will move down even there is no notification bar.

    So, I was thinking to add notification bar as a shortocde to sticky header.
    I’ve tried using “Theme Sticky Selector” but I could not achieve anything with that.

    Or maybe notification bar should get a new class if theres is a cookie active and if it is not going to appear for example “notifciation-bar-disabled”, then I think I could check with jQuery if that class exists, and if exists, if I know that the bar will appear, only then add “top: 70px” to my sticky header.

    Or maybe you have another idea? Please let me know. Thank you in advance

    • This topic was modified 4 months, 2 weeks ago by Mare13ki.
    • This topic was modified 4 months, 2 weeks ago by Mare13ki.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Swathi S

    (@swathiswpfront)

    Hello @mare13ki ,

    The shortcode cannot be used because it causes content jumping.

    Could you please test with this development version?

    https://drive.google.com/file/d/1i71ecGJuEdDy7d_4Q67A8Y8Da2OcUuk-/view?usp=sharing

    I hope this helps!

    Thanks!

    Thread Starter Mare13ki

    (@mare13ki)

    Hey @swathiswpfront, thank you, can you please just tell me what that development version should do, so I know what change to expect when I install it ??

    Thanks again

    Plugin Support Swathi S

    (@swathiswpfront)

    Hello @mare13ki ,

    We add the new class ‘hidden’ when the notification bar is not visible. You can now use that class to check jQuery and apply CSS.

    I hope this helps!

    Thanks!

    Thread Starter Mare13ki

    (@mare13ki)

    @swathiswpfront , okay, thank you, I managed to make it work. Here is my code if someone else has this issue.

    So – I had an issue where notification bar will come on top of the sticky header. If you set your notification bar to appear after 20 seconds for example, this code will move sticky header down a bit after 20 seconds so notification bar and sticky menu do not overlap. ( it will add margin-top: 70px to sticky header )

    This code will also make sure that the margin-top: 70px is NOT added if notification should not appear because of the cookie. ( you will need to update the classes )

    jQuery(document).ready(function( $ ){
    if($('#wpfront-notification-bar.hidden')[0]){} else {
          $(".your-header-class .elementor-container").css("margin-top", "0");  

          setTimeout(function(){ 
            $(".your-header-class .elementor-container").css("margin-top", "70px"); 
            myLoop(); 
        },19500);   


    }

    function myLoop() {
        //console.log('myLoop');

        setTimeout(function(){
            if($('#wpfront-notification-bar.hidden')[0]){
                //console.log('click');
                $(".your-header-class .elementor-container").css("margin-top", "0px"); 
                $("#wpfront-notification-bar-table").css('display','none');
            } else {        
                myLoop();
            }
        }, 3000 )
    }
    });

    Thanks again for the help and for the DEV version of the plugin

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.