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