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.
Hi there @ProBike
Your request is with our devs now. I’ll get back to you once I receive a response from them
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
And put the link there.
Solved
ProBike
This is the announcement bar. It doesn't overlap the logo and title.
Example -
Hi there @ProBike
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
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
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
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