Mobile off canvas menu - right side

Hi there,

first you will need to set the Close Button to Inner in the Customizer > Layout > Off Canvas ( or there will be no way to close the navigation without following a link.

Once thats done ill provide the CSS to make if full screen.

Regarding the hover color, in theory this won't be seen on mobile as it doesn't support hover.

Oh I see makes sense.

I have just set the Close Button for the off canvas menu to inner.

Try this CSS:

#generate-slideout-menu.offside {
    width: 100% !important;
}
#generate-slideout-menu.offside--right {
    right: -100%;  
}
#generate-slideout-menu.offside--right.is-open {
    transform: translate3d(-100%,0,0);
}

It does create an overlay menu, however the submenu items appeared boxed, how can i get rid of the padding so that the submenu takes all of the width?

Last thing re off canvas menu, is there a way to customize the size of the arrow icon for the menu items, it seems to be small?

Add this CSS to remove the padding:

.nav-below-header #generate-slideout-menu .inside-navigation.grid-container {
    padding: 0;
}

Then this CSS to set the size of the submenu toggle, i also added the spacing, border-radius, margins and colors for you to style them:

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    font-size: 25px;
    margin: 1px;
    border-radius: 2px;
    background: rgba(230,217,206,.85); /* Set toggle background */
    color: #f00; /* Set toggle color */
}

And if you want the fine border above the submenu when its open - add this:

#generate-slideout-menu.main-navigation .main-nav ul ul {
    border-top: 1px solid rgba(0,0,0,0.1);
}

Many thanks, that works great!

Glad to hear that!