# Lower on Mobile so it doesnt cover the logo

**URL:** <https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384>\
**Category:** Customization\
**Created:** [March 26, 2024, 3:58pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384 "2024-03-26T15:58:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [March 26, 2024, 3:58pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/1 "2024-03-26T15:58:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 26, 2024, 5:32pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/3 "2024-03-26T17:32:28Z")

</div>

Hi there @ProBike 👋

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

---

<div class="post-metadata">

**Author:** ![GalacticNetwork](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/galacticnetwork/32/27225_2.png) [@GalacticNetwork](https://community.elfsight.com/u/GalacticNetwork)\
**Post date:** [March 26, 2024, 8:18pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/4 "2024-03-26T20:18:14Z")

</div>

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 👍

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 -

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 27, 2024, 10:02am UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/5 "2024-03-27T10:02:30Z")

</div>

Hi there @ProBike 👋

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

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![ProBike](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/probike/32/20070_2.png) [@ProBike](https://community.elfsight.com/u/ProBike)\
**Post date:** [June 17, 2024, 3:56pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/6 "2024-06-17T15:56:11Z")

</div>

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](http://www.optimate.co.uk)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 17, 2024, 4:03pm UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/7 "2024-06-17T16:03:54Z")

</div>

Hi @ProBike 👋

I am so sorry about it!

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 18, 2024, 6:39am UTC](https://community.elfsight.com/t/lower-on-mobile-so-it-doesnt-cover-the-logo/45384/8 "2024-06-18T06:39:45Z")

</div>

Please try to use this code instead:

```auto
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 🙂