[Resolved] Mobile Menu Drop Down Arrows Disappearing

Home Forums Support Mobile Menu Drop Down Arrows Disappearing

This topic contains 15 replies, has 2 voices, and was last updated by  David 3 weeks, 3 days ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1135616

    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.

    #1135810

    David Customer Support

    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.

    #1136514

    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.

    #1136756

    David Customer Support

    2. Can you share the CSS that you added?

    #1137332

    Paul

    Thanks David

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

    Cheers

    #1137354

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

    #1137436

    Paul

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

    Thanks

    #1137596

    David Customer Support

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

    Paul

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

    Cheers

    #1137681

    David Customer Support
    #1142165

    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.

    #1142402

    David Customer Support

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

    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

    #1143107

    David Customer Support

    In the first piece of CSS change:

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

    to:

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

    #1143161

    Paul

    That worked beautifully David – thanks again 🙂

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.