Slide out Menu Customization

Hi Andrew,

1. You can add a menu item to your slideout menu, and give it this class: slider-exit

That will make it exit the slider when clicked.

2. Try this:

nav.slideout-navigation {
    -moz-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    opacity: 0;
    transition: opacity 500ms;
}

.slide-opened .slideout-navigation {
    opacity: 1;
    transition: opacity 500ms;
}

3. This post should help: https://generatepress.com/forums/topic/side-menu-font-size-too-small/#post-218941

4. Try this:

nav.slideout-navigation {
    width: 270px;
}

5. There's two hooks you can insert functions into:

generate_inside_slideout_navigation
generate_after_slideout_navigation

So you can hook your functions into either of those to add whatever you like.

Hope this helps :)

All of these work. Thank you! I'd still like to figure out a better solution for #1 if we could?

How can I make the actual 'X' that you click to close out show on top of the slide out menu.

Just add the HTML for the close icon in the menu item with the close class: http://fontawesome.io/icon/times/

Happen to know a good tutorial on how to do that and where I need to add it to?

Shouldn't be too difficult.

1. Add a custom link in "Appearance > Menus".
2. Give it the slider-exit class: https://generatepress.com/knowledgebase/using-menus/#custom-classes
3. Add the icon HTML into the Navigation label: <i class="fa fa-times" aria-hidden="true"></i>
4. Put # as the URL.

That should be it :)

I created that menu. Where do I add it? What I mean is I don't want the 'icon' to be an addition to the side menu I have set. I want the icon that is underneath the side menu to show on top.

That would require a lot more work and might not even be possible.

This method adds a new close button inside the slideout menu, which you can then style as needed.

Result would be the same with a lot less CSS.

Hi Tom, just looking at this and adding the cross icon as you suggest works perfectly for me, just wondering however why this is not a default part of the slideout menu?

Seems that it would be a normal behaviour to be able to simply close a slideout menu rather than have to mouse away and click somewhere else to close it.

I would anyway so would be a little painful to have to remember to do this manually on each site I build. Pretty sure most hamburger mobile menus have the close symbol visible.

Usually the X is visible, in this case it isn't because the menu is sliding from the right (where the X usually is).

I'll play with some design ideas :)

Hi Trying to implement a slide-out menu on an RTL site.
I don't understand how to get the slideout to sit above the site as a whole and not in the section that I place it.

IS there a video tutorial?

Lisa

Hi there,

this is a really old topic, can you start a new one where you can share your Site URL privately?