[Resolved] Off-Canvas Panel: submenu styling

Home Forums Support Off-Canvas Panel: submenu styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1405426
    Klaus

    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

    #1405478
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .slideout-navigation.do-overlay .slideout-menu li a {
        display: block;
    }
    #1406866
    Klaus

    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

    #1407228
    David
    Staff
    Customer Support

    I don’t think that would be possible without specifying exact widths for each Menu item.

    Glad to hear this works for you 🙂

    #1409262
    Klaus

    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

    #1409308
    David
    Staff
    Customer Support

    Ooh – i didn’t think of that 🙂
    Thanks for sharing – and glad you found a working solution !

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.