Body Overlay for Mobile menu

8 replies · opened Jun 17, 2023

SsilkysackJun 17, 2023

Can the same body over lay as the Side Panel uses be applied to the Mobile Menu Off Canvas?

I like the ability to click the overlay to close the menu as well. Thanks!

SSemicolon WebSTAFFJun 19, 2023

Hello,

This is partially possible. The Body Overlay will be applied but it will not overlay the Header as the Header needs to have a z-index in order to display the Menus on Top of everything. You can consider trying the CSS below:
[ch_pre type="css"]body:not(.primary-menu-open) #wrapper::after {
opacity: 0;
}

.primary-menu-open #wrapper::after {
content: "";
opacity: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
-webkit-backface-visibility: hidden;
transition: opacity 0.3s ease;
cursor: url("images/icons/close.png") 15 15, default;
}

.primary-menu-open .menu-container {
position: fixed;
z-index: 600;
}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsilkysackJun 26, 2023

This will work, the only issue is when the background overlay is clicked it does not close the menu and change the hamburger icon from an X back to hamburger icon.

Can you make it so when the background overlay is clicked it does the same function as clicking the hamburger icon?

Thanks!

SSemicolon WebSTAFFJun 26, 2023

Hello,

Ohh wow! This should already work by default as the Default Functionality included already works in this way. We have tried checking out the Codes and it appears to be working fine for us (we have attached a Video). Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SsilkysackJun 26, 2023

I saw my mistake, its working!!!

Last question regarding this, is it possible to make the body not scrollable when the menu is open? I want only the menu itself to be scrollable, but the body of the website behind the menu to not scroll. Thanks!

SsilkysackJun 26, 2023

Also, would it be possible to add an X icon on the menu itself to close the menu?

SSemicolon WebSTAFFJun 27, 2023

Hello,

  1. You can add the following code to make the Body not-scrollable:
    [ch_pre type="css"]body.primary-menu-open {
    overflow: hidden;
    }[/ch_pre]

  2. You can place the Primary Menu Trigger Buttons anywhere on the Page, including multiple ones. However, the Off-Canvas Mobile Menu is a `` Tag and adding the Button inside will lead to invalid HTML, so this will require Customizations. Since, currently Customization related Support is not included with the License according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire Us to help you out with Customizations.

Thanks for Understanding.

Let us know if we can help you with anything else or if you find any further issues.

SsilkysackJun 27, 2023

Thanks a bunch for your help! You guys are great!!!

SSemicolon WebSTAFFJun 27, 2023

Very Happy to Help! :)

Please do let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard