[Support request] Slide out Menu Customization

[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?

[Tom]

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 🙂

[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.

[Tom]

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

[Andrew]

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

[Tom]

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 🙂

[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.

[Tom]

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.

[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.

[Tom]

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 🙂

[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

[David]

Hi there,

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

[Author]

Posts