Archived topic
Off-Canvas Menu Item and Menu width
7 replies · Started by Torsten on July 21, 2022
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,
Torsten
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-width variable. First value is for Desktop and second value is for mobile.
Adjust the 40 and 70 to suit. The vw unit is % of the viewport width.
lovely!
still the "Impressum" in the menu and, just noticed, no Hamburger-Menu on mobile.
Thanks,
Torsten
If you edit the Menu in Appearance > Menus - can you see the Impressum menu 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 Menu
N°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,
Torsten
Haha - glad to be of help!
