Archived topic

Full screen mobile menu on Smartphone

4 replies · Started by Ender on February 22, 2019

Viewing posts 1–5 of 5

February 22, 2019 at 2:18 pm #818133

I would like customize a little the slide menu. I currently user the menu only on mobile. To open the menu in full screen i use this code

https://generatepress.com/forums/topic/full-screen-mobile-menu-on-smartphone-and-desktop/#post-707494

with this little modification:

.slideout-overlay {
    background: #000;
}

.offside--right.is-open {
    right: auto;
    left: calc(50% - 132.5px);
    transform: translate3d(0,0,0);
}

.nav-aligned-right.nav-below-header .main-navigation.slideout-navigation {
    text-align: left;
}

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

#generate-slideout-menu .slideout-menu li a {
    border-bottom: 1px solid #282828;
    padding: 0;
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    left: 0;
    margin-left: -15px;
}

.main-navigation.slideout-navigation {
    background: transparent;
    padding-top: 10%;
}

li.slideout-toggle {
    position: absolute;
    left: 0;
}

.main-navigation .main-nav ul li.slideout-toggle a {
    padding: 15px;
    line-height: normal;
}

.inside-navigation {
    position: static;
}

1. Chrome / Safari problem

Adding this CSS to have the close button on the left corner is working on Chrome (Win / iMac).

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    left: 0;
    margin-left: -15px;
}

But unfortunately not on Safari (iMac).

Can u help?

2. How can I stop the scrolling when using this full screen menu?

3. How could I make a little transition, for example the menu names will pull from top to the bottom with little fade?

February 22, 2019 at 2:38 pm #818149

I could solve now the Question 1 with adding this for Safari:

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: unset;
}

Any Ideas for the other two questions? Many thanks.

February 22, 2019 at 5:32 pm #818276

Hi there,

2. Try this:

.slide-opened body {
    overflow: hidden;
}

3. Try this:

.slideout-navigation .main-nav {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}

.slide-opened .slideout-navigation .main-nav {
    opacity: 1;
    transform: translateY(0);
}

Let me know :)

February 23, 2019 at 12:17 am #818439

That's why I love your service and recommend it to all friends.

Thank you so much. It works really well.

February 23, 2019 at 8:25 am #818873

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.