Archived topic

Center slide out menu items

1 reply · Started by Dinesh on May 24, 2018

Viewing posts 1–2 of 2

May 24, 2018 at 1:54 pm #583927

Hello,

Is there a way to center the slide-out menu items?

I was able to add space to the top of the menu using the following code

@media (min-width: 1024px) {
#generate-slideout-menu .inside-navigation {
margin-top: 25px;
}
}

But is there a way to center this so that anytime we add more menu items the top and bottom menu item are equally spaced from the top and bottom

Regards

May 24, 2018 at 2:56 pm #583978

Hi Dinesh,

a bit experimental but you can tru this:

.slideout-navigation .inside-navigation,
.slideout-navigation .inside-navigation .main-nav,
.slideout-navigation .slideout-menu {
    height: 100%;
}

.slideout-navigation .slideout-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

The justify-content: space-between will force the elements to fill the column and put equal space between them. You may want to look at the other CSS Flex Justify content rules such as space-around, space-evenly and centered

This archived topic is closed to new replies.

Start building better websites today.