How to Show a Website is Closed based on Day?

Design help Custom code
1

Hi Webflow Forum! I built a website for a restaurant that is closed on Sundays. So far I’ve got an overlay that I manually turn on every Sunday. Is there a better/automatic way of doing this?

image
image1229×601 114 KB

image
image1247×622 36.7 KB

2

Hey Louis, share your read-only project link.
We can only make vague recommendations without it.

I’ll guess that by “overlay”, you are referring to an interactions-based pop-up that you only want to appear on Sundays? That way customers immediately know the restaurant is closed, but can still see the menu and photos if they want to.

In that case, you’d build your pop-up as normal, and then add a piece of JavaScript that suppresses it from appearing Mon-Sat ( local time ).

If it’s just a big DIV that’s covering everything, the same basic principle could apply- but in that case you can switch the script to only make the div visible on Sundays. That’s safer, just in case the user has scripts disabled.

3

hi @Gonlou077 you can show overlay dynamically with simple JS code
like eg. this one:

let today = new Date();
if(today.getDay() == 6 || today.getDay() == 0) {
  let overlay = document.getElementById("overlay");
  overlay.style.display = "block";
}

But hiding whole website content is very bad UX and I would not recommend it. Instead, you should show potential restaurant customers that you are closed on those days as an opening days element or similar notification on the home page or a small popup modal that will appear only on Sunday, etc. to give them the option to visit the site to see information and call you or visit you on a different day instead hiding content from them when they visit your site on Sunday.

1 Like