Mobile Menu Drop Down Arrows Disappearing

Hi there,

1. You will need to edit the Mega Menu CSS, find this rule:

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

and remove it from the @media(min-width: 769px) {} and place it in a new @media(min-width: 1015px) {} query.

2. I provide some CSS here for adjusting the width of the Off Canvas panel ( Right hand opening ):

https://generatepress.com/forums/topic/i-need-help-with-customizing-my-menu-mobile-siderbar/#post-1132714

You will need to adjust the media query to suit and swap out the 200 measurement to the desired sizes.

Thanks David.

1. I got the arrows working fine now :)

2. I used that menu width code and changed 200 to 400. Worked well on desktop, however on mobile it forces the off-canvas menu to display jammed on open all the time. For now I've commented that code out.

2. Can you share the CSS that you added?

Thanks David

That worked - not sure how that code got in there.

Cheers

Sorry - ignore my comment above, wrong post. Here is the code....

/* Mobile menu width */
@media (max-width: 768px) {
.main-navigation.offside {
width: 400px;
right: -200px;
}
.offside--right.is-open, .offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(-200px,0,0);
-moz-transform: translate3d(-200px,0,0);
-ms-transform: translate3d(-200px,0,0);
-o-transform: translate3d(-200px,0,0);
transform: translate3d(-200px,0,0);
}
.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
right: 400px;
}
}

Ideally looking at a responsive, full-width mobile menu similar to this example.

Thanks

All unit measurements need to be the same in that code.
Try this - it will make off canvas 400px on tablet and full width on mobiles:

/* Tablet devices 400px wide off canvas */

@media (max-width: 768px) and (min-width: 421px) {
    .main-navigation.offside {
    	width: 400px;
    	right: -400px;
    }
    .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-400px,0,0);
        -moz-transform: translate3d(-400px,0,0);
        -ms-transform: translate3d(-400px,0,0);
        -o-transform: translate3d(-400px,0,0);
        transform: translate3d(-400px,0,0);
    }
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: 400px;
    }
}

/* Mobiles full width off canvas */

@media (max-width: 420px) {
    .main-navigation.offside {
    	width: 100vw;
    	right: -100vw;
    }
    .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-100vw,0,0);
        -moz-transform: translate3d(-100vw,0,0);
        -ms-transform: translate3d(-100vw,0,0);
        -o-transform: translate3d(-100vw,0,0);
        transform: translate3d(-100vw,0,0);
    }
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: 100vw;
    }
}

Thank you so much David - will play with this a little.

Cheers

You're welcome

Hi David

All working well here. Couple of usability tweaks we need to make for the mobile menu - if you could please let me know what's possible...

1. As per this mock, I would like to add a 1px grey line separator between menu items.

2. Also for mobile menu, for child menu items eg: everything inside 'Services...', is there any way of indenting menu items to the right slightly?

Thank you.

1. To add underline to menu items with children:

#generate-slideout-menu .slideout-menu li.menu-item-has-children {
    border-bottom: 1px solid #ccc;
}

2. Add indent and reduce sub menu item font size to accommodate indent - may need adjusting

#generate-slideout-menu.main-navigation .main-nav ul ul > li a {
    padding-left: 20px;
}

.slideout-navigation.main-navigation .main-nav ul ul li a {
    font-size: 16px !important;
}

Thanks David

Those both work great.

Just on the underline, how do I get those dividers to display on all menu items. Currently they only display on items that have child menus.

Thank you

In the first piece of CSS change:

#generate-slideout-menu .slideout-menu li.menu-item-has-children {

to:

#generate-slideout-menu .slideout-menu li {

That worked beautifully David - thanks again :)