[Resolved] Mobile Menu Drop Down Arrows Disappearing

[Paul]

Hi guys

Couple of queries for you regarding the mobile menu…

1. At around 1015 px browser width the mobile menu displays. In the ‘Services & Programs” section, the child levels eg: “Therapy & Skills…” should display its own drop down arrow to its child pages.

The drop down arrows for these menus items don’t seem to display until browser with is around 766 px.

Is there a way to fix this?

2. Also, for the fly-out mobile panel, is there a way to increase the % width of this based on the mobile viewport?

Thank you.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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.

[David]

2. Can you share the CSS that you added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thanks David

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

Cheers

[Paul]

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

[Paul]

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

Thanks

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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

Cheers

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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

[David]

In the first piece of CSS change:

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

to:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

That worked beautifully David – thanks again 🙂

[Author]

Posts