[Resolved] Slide Out Menu from Top Instead of Left/Right

[Sam]

How can I make the slide-out menu enter from the top instead of left or right?

[Tom]

Currently it’s not possible, but it will be some point in the future.

Do you have any examples of what you’re trying to achieve? I may be able to help.

[Sam]

The site I’m working on is http://www.dev.folk.pt/, and I’m looking for a way to make the Slide Out Menu come in from the top instead of the left side (on mobile and tablet).

[generatedcadcpr]

Would love this as well. or any way of having a separate mobile menu where I can use different links. This is especially helpful when making single page websites with anchor links.

right now I use the slide out menu on mobile to accomplish this, but the design of it sliding from the left doesn’t look as good as the normal menu coming from the top.

[Tom]

This is something I’ll be adding into the core plugin, but for now something like this might do the trick:

nav#generate-slideout-menu {
    transform: translate(0%, -100%) !important;
    height: auto !important;
    width: 100%;
}

.slide-opened nav#generate-slideout-menu {
    transform: translate(0%, 0%) !important;
}

#generate-slideout-menu .slideout-menu>li {
    display: inline-block !important;
    width: auto;
}

[Sam]

That did the trick! Much thanks, Tom.

[Tom]

You’re welcome 🙂

[Jamal]

Hi

Just for reference, i think a menu like this is very nice and modern https://drive.google.com/open?id=0B3mz32DmClpdbkRfN2JFRVRYdVk

[Tom]

That is nice, kind of like a mega menu that you can open with a toggle. Don’t see why it couldn’t happen in GP with a little JS magic 🙂

[Jamal]

Awesome ! I will be more than happy to test it when you have time to work your magic on it.

[Author]

Posts