How to Create GeneratePress Notification Bar without a Plugin?

In this tutorial, we are going to Create GeneratePress Notification Bar without a Plugin. Here, we are going to use Elements Module available in GeneratePress Premium Theme.

Also, in this guide, you will learn

  • Make notification bar sticky.
  • Use of Pure JavaScript to close the notification bar.
  • GeneratePress Elements Module.
  • So On …
Create GeneratePress Notification Bar without a plugin

Also Read: GeneratePress Review

In this tutorial, we are going to use CSS code to make notification bar sticky, Elements Module, and Pure JavaScript to close the notification bar.

GeneratePress Notification Bar Features

  • No jquery code.
  • Only Pure JavaScript
  • JavaScript is optional.
  • Dismissable Notification Bar.
  • Super-fast loading speed.
  • Notification bar works in Mobile, Tablet, and Desktop.
  • Can be used for Promotional Sale.

Create GeneratePress Notification Bar

Before creating a notification bar, if you are using a sticky menu for the primary menu then you need to off the sticky navigation.

Go to Appearance > Customize > Layout > Sticky Navigation > Off

Sticky Navigation Off in GeneratePress

1. Add Message using Elements Module

Here, we are not going to use the top bar widget here to create a dismissable notification bar but here we are going to use Elements Module’s Hook for this tutorial.

First, you need to enable Elements Module if you haven’t already. Go to Appearance > GeneratePress > Elements > Activate.

Activate Element Module in GeneratePress Theme

Now, Go to Appearance > Elements > Add New.

Choose Elements Type as Hook.

GeneratePress Notification Bar Code

Copy and Paste the HTML code into the Hook Box.

<div id="wplogout-top-bar-notification">
	<div class="notice-inner grid-container">INSERT YOUR NOTIFICATION HERE!  <a href="ENTER YOUR URL HERE" target="_blank">INSERT YOUR LINK Text HERE</a><button id="wplogout-closebar" type="button">X</button>
	</div>
</div>

Now go to Hook Settings and choose the Hook as before_header or generatepress_before_header.

Hook Setting generatepress_before_header

After that go to Display Rules and Choose Location as Entire Site.

Display Rules in Entire Site in GeneratePress Theme

Hit Publish Button.

Moreover, we need to add JavaScript code in the Hook Section. Please follow steps 2.

2. Pure JavaScript to Close Notification Bar

Here we are not using any dependencies, here we are using Pure JavaScript that is super fast and doesn’t hamper your site loading speed. This code is used to close the notification bar i.e. to dismiss the whole notification area.

<script>
    document.getElementById("wplogout-closebar").onclick = function() {
        var z = document.getElementById("wplogout-top-bar-notification");
        if (z.style.display == 'none') {
            z.style.display = 'block';
        } else {
            z.style.display = 'none';
        }
    }
</script>

Now again go to Elements > Add New > Choose Element Type as Hook

Add a Hook Title.

WPLogout Top Bar JavaScript code

Copy the above JavaScript Code and Paste it into Hook Box

Now, go to Hook Settings and choose as wp_footer.

Hook-after-WP_Footer-in-WP-Show-Posts

Moreover, go to Display Rules and Choose Location as Entire Site.

Display Rules in Entire Site in GeneratePress Theme

Hit Publish Button.

4. Style Notification Bar

Now, we are going to style our notification bar. Go to Appearance > Customize > Additional CSS. Copy and Paste the following code.

#wplogout-top-bar-notification {
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 9999;
    border-bottom: 3px dashed #eaf1f8;
    background-image: linear-gradient(to left, #E100FF, #7F00FF)!important;
    color: #fff;
    font-size: 15px;
    padding: 7px 0px;
}

.admin-bar #wplogout-top-bar-notification {
    top: 32px;
}

#wplogout-top-bar-notification a {
    border-bottom: 2px dotted;
    color: #fff;
}

#wplogout-closebar {
    float: right;
    padding: 5px 9px;
    border-radius: 15px;
    background-color: #eee;
    color: #34495e;
    line-height: 1em;
}

5. Result

The Notification Bar in GeneratePress looks like this and you can change in colors for notice bar.

Notification Bar in GeneratePress Result

Create GeneratePress Notification Bar with Sticky Primary Menu

What if you wanted both your Primary menu and notification bar to be sticky? Yes, you can do that but the problem is that you can’t create a dismissable notification bar since there will be a gap between the top area and primary menu when you close the notification bar.

If you have a solution then you can comment below for this.

Moreover, we are going to follow the above tutorial so, before starting, make sure you have turned off the sticky navigation option as mentioned above.

Now follow the above tutorial completely except the pure JavaScript code. Don’t use JS since we will not dismiss the notification bar.

Remove pure JavaScript Code from the above tutorial.

<script>
    document.getElementById("wplogout-closebar").onclick = function() {
        var z = document.getElementById("wplogout-top-bar-notification");
        if (z.style.display == 'none') {
            z.style.display = 'block';
        } else {
            z.style.display = 'none';
        }
    }
</script>

Also, Remove close button from the HTML code.

<button id="wplogout-closebar" type="button">X</button>

And, Remove CSS code.

#wplogout-closebar {
    float: right;
    padding: 5px 9px;
    border-radius: 15px;
    background-color: #eee;
    color: #34495e;
    line-height: 1em;
}

Now go to Additional CSS and Add this CSS code.

#site-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 75px; /*Change as your requirement*/
    z-index: 999;
}

Result

Primary Menu and Notification Bar Sticky in GeneratePress Theme
Sticky Primary Menu and Notification Bar in GeneratePress Theme

Conclusion

I was searching for the tutorial to create a generatepress notification bar and there were few solutions using jquery.

But I wanted a notification bar that doesn’t require any dependencies so here I used pure JavaScript, CSS code, and Elements Module to create a light-weight notification bar that loads super-fast and doesn’t load any external script. So, enjoy this notification bar tutorial and also check out the latest GeneratePress Tutorials.

Moreover, you can use this approach in any other WordPress Themes by using code in header.php directly.

If you have any query, please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

2 thoughts on “How to Create GeneratePress Notification Bar without a Plugin?”

Leave a Comment