Vertical Middle Center Align: Off Canvas Panel Overview

Hi there,

Try this CSS to align center menu items in off canvas panel:

#generate-slideout-menu .slideout-menu li a {
    text-align: center;
}

And this to hide the scrollbar:

html.slide-opened body {
    overflow-y: hidden;
}

Let me know :)

The first part did not work, the menu items are not "vertically" middle aligned in the center middle of the viewport.... instead they are centered top aligned. How do we get the #generate-slideout-menu to be vertical middle centered?

Thanks Ying, the 2nd part worked and hid the scrollbar... excellent!

Appreciate the fast response.

Sorry I misunderstood your question, try this CSS instead:

nav#generate-slideout-menu {
    display: flex;
}
.slideout-navigation .main-nav {
    margin-bottom: 0;
}

Hmm, I didn't have any luck with that. It worked for you though huh?

I just made a brand new installation and all, still no luck. Check it out (look in private info)...when you click toggle menu the overlay menu is not vertical middle/centered (equal spacing between TOP and BOTTOM of menu). I even added !important in the Customizer > Additional CSS area and still had no luck.

Thanks for your best foot-forward effort.

With the actual site, it's easier for us to test CSS :)

Try add this CSS as well:

.slideout-navigation .main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slideout-navigation.do-overlay .inside-navigation {
    padding: 0;
}