How to Add a Sticky Bar to Your Website Using OzSpeed hPanel

A Sticky Bar is a fixed notification or call-to-action bar that remains visible as users scroll through your website. It’s an effective way to highlight promotions, collect leads, or provide important information without disrupting the user experience. With OzSpeed’s hPanel, you can easily add a sticky bar to your site. Here’s a step-by-step guide to get started.

---

Step 1: Plan the Content of Your Sticky Bar #

Decide what you want your sticky bar to display. Common uses include:

• Promotions: Announce sales, discounts, or special offers (e.g., “Get 20% off your first order!”).
• Lead Collection: Include a signup form for newsletters (e.g., “Subscribe for exclusive updates!”).
• Announcements: Display important updates or alerts (e.g., “Free shipping on orders over $50!”).

Tip: #

• Keep the message short and include a clear call-to-action (CTA) button.

---

Step 2: Create the Sticky Bar HTML Code #

You can use a simple HTML and CSS code snippet to create a basic sticky bar.

Example Sticky Bar Code: #

htmlCopy code<!-- Sticky Bar HTML -->
<div id="sticky-bar">
  <p>🎉 Get 20% off your first order! Use code: WELCOME20 <a href="/shop" class="cta-button">Shop Now</a></p>
  <button id="close-sticky-bar">✖</button>
</div>

Example CSS Code: #

cssCopy code/* Sticky Bar Styles */
#sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sticky-bar p {
  margin: 0;
  font-size: 16px;
}

.cta-button {
  background-color: #ffd700;
  color: #333;
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
}

#close-sticky-bar {
  background: none;
  color: #fff;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

Example JavaScript Code (Optional – Close Button Functionality): #

htmlCopy code<script>
  document.getElementById('close-sticky-bar').addEventListener('click', function() {
    document.getElementById('sticky-bar').style.display = 'none';
  });
</script>

Tip: #

• Customize the colors, text, and styles to match your website’s branding.

---

Step 3: Add the Sticky Bar Code Using hPanel #

To display the sticky bar on your website, add the HTML, CSS, and JavaScript code using OzSpeed’s hPanel.

How to Add the Code: #

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Settings > Custom Code.
3. Paste the HTML code in the Body Code section.
4. Paste the CSS code in the Custom CSS section.
5. Paste the JavaScript code (if used) in the Footer Code section.
6. Click Save and Publish your changes.

Tip: #

• Adding the sticky bar code to the Body Code section ensures it appears on every page of your website.

---

Step 4: Test the Sticky Bar #

Before making your sticky bar live, test it to ensure it functions properly on both desktop and mobile devices.

How to Test: #

1. Open your website in a new browser tab.
2. Check if the sticky bar appears at the top of the page.
3. Click the CTA button to verify the link works correctly.
4. Click the close button to ensure the sticky bar hides when clicked.

Tip: #

• Test the sticky bar on multiple browsers (Chrome, Firefox, Safari) and devices (desktop, tablet, mobile).

---

Step 5: Customize the Sticky Bar (Optional) #

You can further enhance your sticky bar by adding features like animations, form integrations, or different display triggers.

Example: Add a Slide-In Animation #

cssCopy code#sticky-bar {
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    top: -50px;
  }
  to {
    top: 0;
  }
}

Example: Display Sticky Bar Only on Certain Pages #

If you want the sticky bar to appear only on specific pages, use JavaScript to control its visibility:

htmlCopy code<script>
  if (window.location.pathname === '/shop') {
    document.getElementById('sticky-bar').style.display = 'block';
  } else {
    document.getElementById('sticky-bar').style.display = 'none';
  }
</script>

Tip: #

• Use analytics tools like Google Analytics or Hotjar to track user interactions with the sticky bar.

---

Troubleshooting Tips #

1. Sticky Bar Not Showing Up:
   • Verify that the HTML code is added correctly in the Body Code section of hPanel.
   • Check for CSS conflicts with other elements on your page.
2. Sticky Bar Overlaps Other Content:
   • Adjust the z-index property in the CSS code to ensure the sticky bar appears above other elements.
3. Sticky Bar Not Responsive on Mobile:
   • Use media queries in the CSS code to adjust the size and positioning for mobile devices.
   cssCopy code@media only screen and (max-width: 600px) { #sticky-bar { font-size: 14px; padding: 8px; } }

---

Additional Tips: #

• Track Performance: Use Google Tag Manager or event tracking in Google Analytics to measure clicks on the sticky bar’s CTA button.
• Rotate Messages: Update the content of your sticky bar periodically with new promotions or announcements to keep it relevant.
• A/B Test Your Sticky Bar: Experiment with different messages, colors, and CTAs to see which version performs best.