Lower on Mobile so it doesnt cover the logo

On mobile the announcement bar is at the top of my bage and covers the company logo and menu in the header. It should be above this.

2 Likes

Hi there @ProBike :wave:

Your request is with our devs now. I’ll get back to you once I receive a response from them :slightly_smiling_face:

2 Likes

Hmmm that is a tough one.
Due to ElfSight not using a type of script they use embed (a type of HTML) you can use a type of script instead (HTML, Javascript, etc)
It would be very hard to edit that.
If you change the script to this, you can take the link of the photo you want or if you don’t want one and paste it next to the Logo
And put the link there.
Solved :+1:

Announcement Bar Demo body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .announcement-bar { background-color: #f0f0f0; color: #333; padding: 10px 20px; text-align: center; position: relative; z-index: 1000; } .container { width: 80%; margin: 0 auto; overflow: hidden; } .logo { float: left; margin-top: 10px; } .title { float: left; margin: 0; margin-top: 15px; margin-left: 10px; }
Logo

ProBike

This is the announcement bar. It doesn't overlap the logo and title.

Example -

Hi there @ProBike :wave:

We’ve added this scrip to the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 150) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement("[class*='bar__BarContainer-sc']").then(bar => {
  const header = document.querySelector("header.header");
  
  const moveHeader = () => {
    header.style.top = Math.max(0, bar.getBoundingClientRect().height + bar.getBoundingClientRect().top) + "px";
  };
  
  if (window.innerWidth <= 800) {
    moveHeader();
    document.addEventListener("scroll", moveHeader);
    const closeBtn = bar.querySelector("[class*='close-button__CloseButtonContainer-sc']");
    closeBtn.addEventListener("click", () => {
      header.style.top = "0px";
      document.removeEventListener("scroll", moveHeader);
    }, { once: true });
  }
});

Please check your website and let me know if you like how the widget looks on mobile :slightly_smiling_face:

1 Like

I have added this widet and code to my page as a new floating banner but its covering the header and menu on mobile again. Is there a way for it to push down the header too and float above that? The website is www.optimate.co.uk

1 Like

Hi @ProBike :wave:

I am so sorry about it!

Please let me double-check it with the dev team. I’ll get back to you tomorrow :slightly_smiling_face:

1 Like

Please try to use this code instead:

const WIDGET_ID = '8260a9f5-cddb-4464-b271-c31cb57c839a';

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 150) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement(`.eapps-announcement-bar-${WIDGET_ID}-custom-css-root [class*='bar__BarContainer-sc']`).then(bar => {
  const header = document.querySelector("header.header");
  
  const moveHeader = () => {
    header.style.top = Math.max(0, bar.getBoundingClientRect().height + bar.getBoundingClientRect().top) + "px";
  };
  
  if (window.innerWidth <= 800) {
    moveHeader();
    document.addEventListener("scroll", moveHeader);
    const closeBtn = bar.querySelector("[class*='close-button__CloseButtonContainer-sc']");
    closeBtn.addEventListener("click", () => {
      header.style.top = "0px";
      document.removeEventListener("scroll", moveHeader);
    }, { once: true });
  }
});

If you decide to use it for another widget, replace WIDGET_ID in the 1st line of the code with the actual ID of your widget :slightly_smiling_face:

1 Like