Off canvas left – mobile menu popup how to make bigger?

This topic has 8 replies, 2 voices, and was last updated 1 years, 6 months ago ago by Tony Rodriguez

  • Avatar: PR
    PR
    Participant
    May 29, 2023 at 03:09

    Hello,

    How can we make the off canvas left mobile menu a little wider than it currently is? Currently, it comes half way – so half the screen is going waste and could be used to make the menu more “larger” etc.

    Is there any custom code we can use for this?

    Thanks for your help in advance 🙂

    7 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 29, 2023 at 06:18

    Hello @PR,

    We have noticed that you have asked the same question in another topic, and one of our agents has already provided a solution. Please refer to the following link for more information: https://www.8theme.com/reply/356188/.

    We hope this helps.

    Best Regards,
    8Theme’s Team

    Avatar: PR
    PR
    Participant
    May 29, 2023 at 20:41

    Hello Tony,

    Sorry about that.
    We tried the code and it did not make a difference.

    Code used;

    .et-off-canvas>.et-mini-content {
    width: 100%;
    }

    Can you please check if it shows any difference on your end?
    It is the same size as in the x-store demo websites.

    Domain is on PCA

    thanks!

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 30, 2023 at 08:28

    Hello @PR,

    We hope that the following code will help you to make the mobile menu off-canvas as 100% on the mobile version:

    @media(max-width: 767px){
    .et-content_toggle .et-mini-content.active, .et-off-canvas .et-mini-content.active {
        width: 100% !important;
        max-width: 100% !important;
    }
    }

    We wish you success in your endeavor.

    Best Regards,
    8Theme’s Team

    Avatar: PR
    PR
    Participant
    May 30, 2023 at 08:45

    Hello Tony,

    Thank you!
    Is there a way to make the x (cancel button) show as well?
    Or possible any way to add it when the menu is showing as full?

    Thank you in advance

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 30, 2023 at 09:52

    Hello @PR,

    We regret to inform you that due to the small screen resolution, it is not possible to change the position of the item and make it clickable. This would require additional customization.

    Thank you for your understanding.

    Best Regards,
    8Theme’s Team

    Avatar: PR
    PR
    Participant
    May 30, 2023 at 09:57

    Hello Tony,

    Thanks!
    We decided to make it 90% versus 100%.

    However, is there anyway we can possible add add a “x” in the form of a static block and once that is clicked, make it exit the menu?

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 31, 2023 at 06:58

    Hello @PR,

    We appreciate that 90% width would be a good idea.

    However, as we previously explained, it is not possible to change the position of the cross button with CSS as doing so would make it unclickable.

    Thank you for your understanding.

    Best Regards,
    8Theme’s Team

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.