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 the notification bar sticky.
• Use Pure JavaScript to close the notification bar.
• GeneratePress Elements Module.
• So On …

Also Read: GeneratePress Review

In this tutorial, we are going to use CSS code to make the 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.
• The notification bar works on Mobile, Tablet, and Desktop.
• Can be used for Promotional Sales.

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

1. Add Message using Elements Module

Here, we are not going to use the top bar widget 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.

Now, Go to Appearance > Elements > Add New.

Choose Elements Type as Hook.

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.

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

Hit Publish Button.

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

2. Pure JavaScript to Close Notification Bar

Here we are not using any dependencies, here we are using Pure JavaScript which 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.

Copy the above JavaScript Code and Paste it into Hook Box

Now, go to Hook Settings and choose as wp_footer.

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

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 of the notification bar.

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 the 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 for 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 the 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

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 lightweight 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 queries, please feel free to comment below.