Top Bar – @tuanphan

Description

adding a custom top bar on top of site
view demo – password: abc
buy me a coffee

#1. Install Code

Note: This code require to use Section Loader Supreme Plugin

#1.1. First, add a Page in Not Linked with Name/URL:

Name: Top Bar
URL: /top-bar

#1.2. Design your desired content. We will use content on this page as Top Bar content

You can set Minimum Height to prevent any padding appears on top/bottom of top bar

#1.3. Click Website > Pages

Scroll down to bottom > Click Custom Code > Code Injection

If you use Personal/Basic Plan and your site doesn’t support Injection, see #3.1

#1.4. Paste this code to Footer box

If you use Personal/Basic Plan and your site doesn’t support Injection, see #3.1

<!-- 06.26c16v3 Top Bar -->
<script>
window.TopBarConfig = {
  source: "/top-bar",
  headerSelector: ".header-announcement-bar-wrapper",
  backgroundColor: "#f3ede5",
  textColor: "#000",
  enableHeaderClick: true,
  showCloseButton: true,
  closeButton: {
    size: "20px",
    color: "currentColor"
  },
  clearDismissed: false
};
</script>
<script src="https://code.beaverhero.com/header/0626c16v1topbar.js"></script>

#2. Customize

#2.1. To change top bar background/text color, change Line 06, Line 07

backgroundColor: "#f3ede5",
textColor: "#000",

#2.2. To change close X icon size/color, change Line 10 to Line 13

closeButton: {
  size: "20px",
  color: "currentColor"
},

to something like this

closeButton: {
  size: "12px",
  color: "#f1f"
},

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Block

Choose Markdown

Paste this code into Markdown

<script>
window.TopBarConfig = {
  source: "/top-bar",
  headerSelector: ".header-announcement-bar-wrapper",
  backgroundColor: "#f3ede5",
  textColor: "#000",
  enableHeaderClick: true,
  showCloseButton: true,
  closeButton: {
    size: "20px",
    color: "currentColor"
  },
  clearDismissed: false
};
</script>
<script src="https://code.beaverhero.com/header/0626c16v1topbar.js"></script>