[Resolved] Slide Out menu center center and full width

[Iñaki Mansilla]

Hi!.

I am trying to replicate the exact same effect like this webpage http://www.racycles.black. Only burger menu, and when expanded centered both horizontal and vertically full width. And if is possible close button on top right.

– Slide out navigation only done with: https://docs.generatepress.com/article/activating-slide-out-navigation/#use-slide-out-navigation-only

Thanks in advanced.

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

The full-width slideout navigation is currently not possible – however, we will be introducing this option in the next version of GP Premium.

Then you can easily create something that looks exactly the same.

The beta should be out in a couple of days and I’ll comment here again when it’s available for testing.

Thanks for your patience!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

Hi Leo.

That sounds great!.

Thanks for your help!.

[Leo]

Hey!

1.8 Alpha has been released. See more info here:
https://generatepress.com/category/development/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

Hi Leo!.

Yes, I know. Tom just replied me into this other topic
https://generatepress.com/forums/topic/shophing-cart-icon-contents-total/#post-843521

Give me one more day to test it and if everything goes well I will mark the topic as resolved.

Thank you very much!!.

[Leo]

No problem.

Hope you like it!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

Hi Leo.

I see in the example the close button top right and the menu centered.
https://generatepress.com/gp-premium-1-8/

Great to the option “Off Canvas Overlay” that turn it into a full-screen overlay, but where can I set the menu to center horizontal and vertically??… I can not see it anywhere in the customiser.

https://ibb.co/yBBMPmc
https://ibb.co/kD10ZWh

Thanks.

[Leo]

Change the style to Overlay instead of Slide.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

I see… That is better!!, excellent thanks again!!.

[Iñaki Mansilla]

Sorry again. Not rush with this.

I am trying to center vertically like in the example above. I do this but it doesn´t work:

.slideout-navigation.do-overlay {
width: 100%;
height: 100% !important;
}

[Leo]

Can you link me to the page in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

Hi Leo.

Yes, the same at the top of the topic
http://www.racycles.black.

Thanks.

[David]

Hi there,

can you link us to your site where you’re are having the problem?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Iñaki Mansilla]

Hi David.

The problem is that is not in production yet. But I could create and provide a login for you.

As I mentioned, as we know with the new feature Slide Out menu it does cover full with and center horizontally, but not vertically.

I am trying to do .slideout-navigation.do-overlay {
width: 100%;
height: 100% !important;
}

but I am not sure if this is the right way to do it… This is what I am trying to do http://www.racycles.black.

And this is my website right now.
https://ibb.co/PtFDPKs
https://ibb.co/x8w3Xn1

Thanks.

[David]

Maybe something like this:

.slideout-navigation.do-overlay {
    display: flex;
    align-items: center;
}
.slideout-navigation.do-overlay .inside-navigation {
    padding: 0 !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts