[Support request] Slide out Menu Customization

Home Forums Support [Support request] Slide out Menu Customization

Home Forums Support Slide out Menu Customization

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #218944

    Hey guys! I am trying to figure out how to customize the side menu. I am moving from Bridge theme, so there seems to be less options available out the gate. I’m trying to create a side menu similar to the following site:


    A few questions around this:

    1) How can the ‘close’ link be displayed on top of the slide out menu. I got it to work sliding out right. Just need to not cover up the closing icon.

    2) Can it change it from a ‘slide out’ to a ‘fade.’

    3) How can I change the size of the text in the menu without changing the size of the Hamburger Menu icon? I used CSS to change the size of the text, which worked, but it also changed the icon size. :/

    4) How can I change the width of the side menu?

    5) How can I add a widget area to the side menu?

    Lead Developer
    Lead Developer

    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:


    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.

    Lead Developer
    Lead Developer

    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?

    Lead Developer
    Lead Developer

    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.

    Lead Developer
    Lead Developer

    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.

    Lead Developer
    Lead Developer

    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?


    Customer Support

    Hi there,

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.