Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[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
    Posts
  • #218944
    Andrew

    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:

    http://elevationchurch.org

    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?

    #219024
    Tom
    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:

    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 πŸ™‚

    #219821
    Andrew

    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.

    #219839
    Tom
    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/

    #219869
    Andrew

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

    #219946
    Tom
    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 πŸ™‚

    #220063
    Andrew

    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.

    #220081
    Tom
    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.

    #221617
    Neil

    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.

    #221698
    Tom
    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 πŸ™‚

    #769759
    Lisa

    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

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