- This topic has 7 replies, 2 voices, and was last updated 3 years, 8 months ago by
.
-
Posts
-
Hi,
could you help me style my Off-Canvas menu?
The menu items are really long, therefore I need to adjust the width of the slide-out-off-Canvas Menu, maybe set to 75% for mobile and tablet and 35% for Desktop.
Code appreciated…I have an additional menu item left of the hamburger menu “Impressum” and can’t get rid of it
.main-navigation .main-nav ul li a { display: none !important; }makes the whole menu invisible in the off-canvas menu as well…
😉
Thanks ahead,
TorstenCustomer Support
Hi there,
try this CSS:
/* desktop width */ :root { --slideout-width: 40vw; } /* small device width */ @media(max-width: 768px) { :root { --slideout-width: 70vw; } } #generate-slideout-menu.main-navigation.offside { width: var(--slideout-width); } #generate-slideout-menu.main-navigation.offside--left { left: calc(-1 * var(--slideout-width)); } #generate-slideout-menu.main-navigation.offside--left.is-open { transform: translate3d(var(--slideout-width), 0, 0); }NOTE: at the top of the code we load the
--slideout-widthvariable. First value is for Desktop and second value is for mobile.
Adjust the 40 and 70 to suit. Thevwunit is % of the viewport width.lovely!
still the “Impressum” in the menu and, just noticed, no Hamburger-Menu on mobile.
Thanks,
TorstenIf you edit the Menu in Appearance > Menus – can you see the
Impressummenu item ?Missing mobile menu – in Customizer > Layout > Primary Navigation what is the Mobile Menu Breakpoint set to ?
N°1:
no – only the items displayed in the Off-Canvas MenuN°2:
was “o”, now “768”😉
Options:
a. create a new menu with NO MENU items, and assign its location to the Primary Navigation, this should leave just the off canvas
OR
b. increase the mobile menu breakpoint to a really hight value like 10000 ( you will need to type into the field ) so it always displays the mobile header
this dirty trick helped.
Wonderful, love it.
best,
TorstenHaha – glad to be of help!
- You must be logged in to reply to this topic.
