- This topic has 8 replies, 3 voices, and was last updated 4 years, 9 months ago by David.
-
AuthorPosts
-
June 23, 2019 at 3:53 pm #938995Tom
What would cause the off canvas X to no longer show up?
June 23, 2019 at 3:59 pm #939000LeoStaffCustomer SupportHi there,
Don’t think I’m seeing the issue on desktop or mobile:
https://www.screencast.com/t/O59j5bevFF0V
https://www.screencast.com/t/7b7HR7D9NEAnything specific I need to do?
Let me know π
June 23, 2019 at 4:04 pm #939001TomWhy is it on the right? Check in Safari too, it’s not showing there.
June 23, 2019 at 4:06 pm #939002TomAnd it’s in a different place in Firefox! π
Something’s messed up somewhere, but I’m having trouble finding where!
June 24, 2019 at 4:47 am #939342DavidStaffCustomer SupportHi there,
this is due to the way browsers interpret the postition: fixed; CSS property – according to the CSS rule book a position: fixed element should position itself relative to the viewport in this case the very top right hand corner, which is what Safari and Firefox are doing.
Chrome does it differently. So we could try this but not 100% sure (lol). Find this CSS in Customizer > Additional CSS:
.slide-opened .main-navigation.offside { transform: initial; position: fixed; top: 0; left: 0; height: 100%; z-index: 100 !important; }
Change the
position: fixed;
toposition: absolute;
Then add this CSS rule:
.slideout-navigation .inside-navigation { position: static; }
May need some tweaking
June 25, 2019 at 2:20 pm #941074TomThat didn’t help and moved the X to the top of the screen. Seems this is a bug. Any chances of a more permanent fix? π
June 25, 2019 at 3:10 pm #941101DavidStaffCustomer SupportThe Site was never designed to have a full screen nav, and with the current right hand fixed position of the Exit toggle we’re battling the way the different browsers handle fixed positions. So if we let the exit button position itself naturally over the menu we can try this.
1. Remove this CSS:
.slide-opened .main-navigation.offside { transform: initial; position: fixed; top: 0; left: 0; height: 100%; z-index: 100 !important; }
2. Add this CSS:
.main-navigation.offside { transform: initial; position: absolute; top: 0; left: 0; height: 100%; } .slideout-navigation.do-overlay .slideout-exit { position: initial; } .slideout-navigation.do-overlay .inside-navigation { padding: 0; max-width: 100%; } .slideout-navigation .main-nav { padding-top: 10%; } @media (max-width: 768px) { .slideout-navigation.do-overlay .slideout-exit { text-align: left; font-size: 18px; } }
June 25, 2019 at 3:25 pm #941112TomPerfect, thank you so much! Appreciate it. π
June 25, 2019 at 3:27 pm #941114DavidStaffCustomer SupportPhew …. glad to hear that and happy to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.