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

[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

[Tom]

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!

[Tom]

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 🙂

[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!

[Tom]

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;
}

[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

[Tom]

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 🙂

[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

[David]

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
}

[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

[Author]

Posts