[Resolved] Mobile Menu Drop Down Arrows Disappearing

Home Forums Support [Resolved] Mobile Menu Drop Down Arrows Disappearing

Home Forums Support Mobile Menu Drop Down Arrows Disappearing

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
    Staff
    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support

    You’re welcome

    #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
    Staff
    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
    Staff
    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.