Archived topic
Off-Canvas Panel: submenu styling
5 replies · Started by Klaus on August 16, 2020
Hi there, GP team,
I would like to use the Off-Canvas panel with style overlay for mobile devices. Unfortunately the submenus look ugly, though all colors are inherited correctly from the desktop main menu. It would be nice if their apperance would mimic the submenus of the main navigation on desktop.
1. The width of each submenu should be adjusted to it's longest entry.
2. When touching a menu item, the backgrund color changes (here:from white to red), but does not cover the complete backgrund as it should. Instead it just appears underneath the text-entry of this particular item.
Could not find a solution myself, so your help is much appreciated.
Maybe my text seems a bit confusing, but you can see immediately what I mean, if you have a look at my pw-protected staging server. The credentila have been sent privately via Account Issue.
Thank you in advance,
Klaus
Hi there,
try adding this CSS:
.slideout-navigation.do-overlay .slideout-menu li a {
display: block;
}Hi David,
thank you very much for the css-snippet.
The Off-Canvas panel now looks much, much better.
What I tried to achieve however was, that the width of each particular submenu should be adjusted to it's longest entry. So every submenu could have a differnt width, just like the submenus of the main navigation on desktop.
But don't worry. I am happy with your solution and will only be back to you, if my customer insits on it.
Thanks again,
Klaus
I don't think that would be possible without specifying exact widths for each Menu item.
Glad to hear this works for you :)
Hi David
you are the expert, not me.
I had just thought that something similar to the short css-snippet for the main navigation on desktop
.main-navigation ul ul {
width: auto;
white-space: nowrap;
}
which does the trick, would also be available for the off-canvas panel.
Nevermind, I will mark this topic as 'solved'.
Thanks again,
Klaus
Ooh - i didn't think of that :)
Thanks for sharing - and glad you found a working solution !
