[Support request] Off Canvas submenu styling – slide width in % is main subject

Home Forums Support Off Canvas submenu styling – slide width in % is main subject

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1144540
    Torsten

    Hi,
    here comes a short version (workaround), mobile phone menu needs some tweaking.
    • slide width adjustment in %
    • reduced left padding for top level items (10px)
    • no line breaks in any menu or sub menu items
    • submenu font heights should be smaller then top level items.

    and here comes a longer and more sophisticated description which I wrote first:
    I’m trying to set up an Off Canvas menu for mobile phones only, this could be the slide option.
    When opening the menu on mobile phone I see the top level menu items, left padding for the items should be reduced to 10px, no line break (so I need to adjust width of slide).

    There is a sub menu below “• branchen submenu” which contains another submenu in “• Elektronik & Automatisierung” (you can check the structure on desktop view, “•” only set for you as optical markers), I added “• branchen submenu” for mobile as “Branchen” is clickable on Desktop.
    the menu items on mobile should not contain line breaks.
    I can only style the font on top level item in customizer.

    Is there a way to have the slide option with top level menu covering the window by 1/3 when only top level items are showing,
    2/3rd with the next submenu and 3/3 with the next sub menu opened? (still with scroll bar and the yellow padding, which means 3/3 -20px)
    1st submenu with a 25% left padding, 2nd submenu with 50% left padding.

    hope this is understandable, I could send a screenshot/photoshop-file by Email, if that helps.
    best,
    Torsten

    #1145088
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    A screenshot/photoshop file would definitely clear a few things up for me. Any chance you can share them here or send them through our contact form?: https://generatepress.com/contact

    If you use the form, be sure to mention this topic.

    Thanks!

    #1145991
    Tom
    Lead Developer
    Lead Developer

    It looks like this will be a good start:

    .slideout-navigation .inside-navigation {
        padding: 0;
    }
    
    #generate-slideout-menu .sub-menu > li > a {
        padding-left: 30px;
    }
    
    #generate-slideout-menu .sub-menu  .sub-menu > li > a {
        padding-left: 60px;
    }

    Let me know 🙂

    #1146620
    Torsten

    lovely!
    this works, I adjusted the padding-left in “%” instaed of “px” and added “font-size: 12px”

    is it possible to have the sub-menu indicator either close to the menu item or left of the menu item?

    one more:
    in desktop view I have the yellow vertical line on the left, which should be on the right side in the header only, propably caused by the slide-out menu.
    How to get rid of this?
    Preferably that yellow line in the header should remain in tablet and mobile view as well in the header, no indicator for the slide-out menu needed at all.

    Thanks, you’re brilliant!

    #1147376
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    .slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: none;
    }

    As for the border, instead of your current border CSS, try this:

    .main-navigation {
        top: 0;
        box-shadow: inset -10px 0 0 #fece42;
    }
    #1152718
    Torsten

    Hi Tom,
    I added

    @media (min-width: 960px) {
    .main-navigation.offside {
        display: none;
    	    }
    }

    to get rid of the yellow vertical line (off-canvas indicator) on the left in desktop view.
    On my mobile I still have that yellow vertical bar when opening the off-canvas menu on its right, with interruptions.
    Can I show it all the way from top to bottom as well when opening the submenus (prefered) or get rid of it completely?
    Thanks a lot, again and again,
    Torsten

    #1153468
    Tom
    Lead Developer
    Lead Developer

    Let’s try this instead:

    .offside--left.is-open {
        -webkit-transform: translate3d(255px,0,0);
        -moz-transform: translate3d(255px,0,0);
        -ms-transform: translate3d(255px,0,0);
        -o-transform: translate3d(255px,0,0);
        transform: translate3d(255px,0,0);
        border-right: 10px solid #fece42;
        width: 255px;
    }
    
    .offside {
        left: -255px;
    }

    Let me know 🙂

    #1153720
    Torsten

    Hi Tom,
    almost…
    I have now a on opening the Website on mobile already a yellow bar which stops inside the header, I would like to eliminate this bar, only the yellow bar on slide-out, which seems to be added by your code.
    I could send you an admin login if this would make things easier, let me know.
    best,
    Torsten

    #1153895
    David
    Staff
    Customer Support

    Hi there,

    change this CSS:

    .main-navigation {
        top: 0;
        box-shadow:inset -10px 0 0 #fece42
    }

    to this:

    .main-navigation:not(.slideout-navigation) {
        top: 0;
        box-shadow:inset -10px 0 0 #fece42
    }
    #1382757
    Torsten

    Hi David,
    hi Tom,
    the client wants now to get rid of the yellow bar in the slide-out menu on mobile, but still wants to keep the yellow bar on the right in the header for desktop and mobile.
    I tried to work on the different codes supplied, but I only manage to get rid of the yellow bar completely…
    Can you help?

    and the yellow bar in the header should stay when scrolling down the page…
    Thx,
    Torsten

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