Collapsing menu for mobile only

Ask the Community Customization
1

Is it possible to collapse the event calendar menu when users are viewing it on their mobile or tablet devices?

2 Likes
3

Hi there and welcome to the Community @Emilia_Oskotsky :wave:

Could you please elaborate on your idea? Do you want the widget to be collapsed and keep the opportunity to open it by clicking on some button if needed? Or maybe you just need to hide the widget for mobile devices?

4

hello,

image

I’d like to keep the calendar, but collapse it instead of hiding it - is it possible to configure the calendar so that it shows normal (expanded) on a web page that’s not mobile device, and as closed on mobile device?

1 Like
5

Just to make sure, do you want the calendar to have an opportunity to be expanded if needed?

For example, on the mobile device the calendar is collapsed initially and only Important Dates 2024 is displayed. And when you click on Important Dates, the calendar can be expanded.

Is it what you are looking for?

6

Yes. Exactly

1 Like
7

Got it!

We’ll be happy to customize the widget for you. However, I’ve checked your website and couldn’t find Important Dates 2024 button.

Is it the right page, or you’d like to apply these changes on another one?

8

Hi Max, in order to see the calendar, you would have to register for a free account on (https://portal.musicallife.org) and then navigate to one of the inner pages - ie dashboard. There, you’ll find a calendar on the left and content on the right …

Please try and let me know if you have a solution?

1 Like
9

Got it!

Yes, it’s possible. I’ve relayed your request to our devs. I’ll get back to you once the solution is ready :wink:

10

I’m not a very technical person, so I would appreciate instructions on how to apply this configuration please. I’m assuming it’s going to be some custom JS or CSS and although I saw options in the widget to add this, I will need your help on what to do :wink:

1 Like
11

Yes, I guess our devs will customize your widget via Custom CSS or Custom JS.

Rest assured, once I receive a response from the devs, I’ll share a detailed description of what has been done :slightly_smiling_face:

12

Max, are you saying that the devs will apply the code to my widget or that I will have to do that myself? I’m a bit concerned because the site is live and we can’t afford the calendar widget to break … please advise?

13

Okay. If you don’t want our devs to apply the solution to apply the solution to your widget, they’ll just share the code and specify where it should be added :slightly_smiling_face:

14

Hi Max, I would appreciate instructions on how to apply the changes (and where) so that we can learn and apply and test at a time that we think will involve least amount of users, hence least impact on our customer base. Appreciate it in advance! :slight_smile:

1 Like
15

Dear Max, can you please provide an approximate date by when this will be provided to us?

1 Like
16

Hi @Emilia_Oskotsky :wave:

Apologies for the delayed reply!

I’ve requested an update from our devs. I’ll immediately let you know once I receive a response from them :slightly_smiling_face:

17

Hi @Emilia_Oskotsky :wave:

Thank you for waiting!

We see that at the moment, the block with the widget is hidden on your website. Once it’s revealed, please add this code to the Custom JS field on the Settings tab of your widget’s settings:

image
image396×814 19.9 KB

function waitForElement(selector, callback, step, limit) {
        const currentStep = step || 300;
        const currentLimit = limit || 5000;
        let remainingTime = currentLimit;
        const intervalId = setInterval(function () {
          const targetElement = document.querySelector(selector);

          if (targetElement || remainingTime <= 0) {
            clearInterval(intervalId);
            if (targetElement && typeof callback === "function") {
              callback(targetElement);
            }
            return;
          }
          remainingTime -= currentStep;
        }, currentStep);
      }
      waitForElement(
        "#elementor-tab-title-6521",
        function (block) {
          if (window.innerWidth <= 440) {
            if (block.className.includes("elementor-active")) {
              block.click();
            }
          }
        },
        null,
        20000
      );

Check it out and let me know if it worked :slightly_smiling_face: