[Support request] can’t control off canvas menu close in safari

[Betsy]

I’m trying to hide the off canvas close button – I can do it in chrome but not safari.

See
https://harrstudios.com/contact/

If you click on the menu toggle – you get the menu but the close doesn’t work (the toggle that does work is right justified and hidden)

[David]

Hi there,

try this CSS:

#generate-slideout-menu {
    pointer-events: none;
}
#generate-slideout-menu .main-nav {
    pointer-events: auto;
}

[Betsy]

that worked but the toggle reverses – it switches between the X and the bars.
https://harrstudios.com/home/?111

[David]

Yeah you may create issues here when it comes to Mobile devices. As the two menu scripts will clash.
Any reason why you’re using the Off Canvas ?
You could simply use the default Mobile Menu, and set the Customizer > Layout > Primary Nav -> Mobile Menu Breakpoint to a really high value eg. 100000 so it always display?

It will still take a little CSS for your style. But it won’t cause you these issues and won’t require the extra code of off canvas.

Let me know what i am missing ?

[Betsy]

The menu design is an overlay in the center instead of a slideout from the right.
It just was coming together better as the off canvas.

[David]

Can you share what CSS you have used so far ?

[Betsy]

Here’s everything I have pertaining to the menu. – I’ve been throwing a lot of mud at it.

/*menu*/
.main-navigation.offside {min-width:500px}
.main-navigation.offside .sub {line-height:30px}
.main-navigation.offside .sub a{font-family: ‘Arimo’;font-size:11px;padding-left:60px;letter-spacing:.0em;line-height:10px!important;}
.main-navigation.offside .extraspace {padding-top:10px;}
.main-navigation.offside .whitenav a {color:white!important;}
.main-navigation.offside .whitenav a:hover {color:black!important;}
.nav-align-right .navigation-branding {padding-left:60px;}
.slideout-menu {margin:60px 0px!important;}
.slideout-menu {background-color:rgb(219 212 197);padding:60px}
#generate-slideout-menu {max-width:1200px;margin:auto;}
#generate-slideout-menu.do-overlay .slideout-menu li, .slideout-navigation.do-overlay .inside-navigation {text-align:left;padding-left:60px;}
.pro-close {display:none!important;}
html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(1),
html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(2) {
display: none !important;
}

html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(1),
html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(2) {
display: block !important;
}
#generate-slideout-menu {
pointer-events: none;
}
#generate-slideout-menu .main-nav {
pointer-events: auto;
}

[David]

Sorry for the late response, this reply slipped through the system.
Did you resolve the issue with the open/close icon ? AS it seems to be working for me. let me know

[Author]

Posts