[Support request] Slideout Menu – Full Width

[Roger]

Hi, is there a way to set the slideout menu to full width?

Thanks!

GP Premium 1.7.7

[David]

Hi there,

i cover how to in this topic:

https://generatepress.com/forums/topic/mobile-logo-and-opening-menu-slideout/page/2/#post-804113

but it will be a coming featured in GP Premium 1.8 which should be out for Alpha testing in the near future.

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

[Roger]

Thanks David. I’ve followed your steps but the close function isn’t working. Do I need to do something more?

[David]

hmmm…. should work. Any chance you can put the CSS and close menu item in so i can take a look?

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

[Roger]

So this is the CSS I’ve added:

/*Center Text*/
#generate-slideout-menu .slideout-menu li {
    text-align: center;
}

/*Add Padding*/
	#generate-slideout-menu.main-navigation.offside {
		padding-top: 10%;
	}

/*Full Screen*/
@media (max-width: 768px) {

    .offside--left.is-open,
    .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(100vw, 0, 0);
        -moz-transform: translate3d(100vw, 0, 0);
        -ms-transform: translate3d(100vw, 0, 0);
        -o-transform: translate3d(100vw, 0, 0);
        transform: translate3d(100vw, 0, 0);
    }

    .offside--right.is-open,
    .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-100vw, 0, 0);
        -moz-transform: translate3d(-100vw, 0, 0);
        -ms-transform: translate3d(-100vw, 0, 0);
        -o-transform: translate3d(-100vw, 0, 0);
        transform: translate3d(-100vw, 0, 0);
    }

    .main-navigation.offside {
        width: 100vw;
    }

    .offside--left {
        left: -100vw;
    }

    .offside--right {
        right: -100vw;
    }
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: auto !important;
    }
    .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
       left: auto !important;
    }
}

And I’ve added a Custom Link in the Slideout Menu with URL # and Navigation Label <span class="slideout-exit screen-reader-text">Chiudi</span>

[David]

Hi there,

this CSS in your child theme is overwriting the position – remove that and it should appear:

.no-csstransforms3d .offside--left.is-open {
    left: 0;
}

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

[Roger]

Hmm, I can’t find that css anywhere and it’s not in my child theme… can you point me to where you found it?

[David]

Could you clear and disable the autoptomize cache. A i cant see where its coming from

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

[Roger]

Ok, done.

[David]

So in the above CSS change:

.offside--left {
        left: -100vw;
}

for:

.no-csstransforms3d .offside--left.is-open {
        left: -100vw;
}

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

[Roger]

Seems to give me an offset menu rather than a fullscreen.

I’m trying to find a way to bring the close button forward so it sits above the overlay, but so far no joy.

[David]

Thats odd – if i add that code with Dev tools it displays correctly. Can you add that CSS back in and i’ll take another look.
The Exit button is part of the background overlay, so you can’t move it to the foreground without the background covering the menu. Thats the reason for adding the menu item exit button.

Roll on GPP 1.8 where this is built in…. but its odd as i have used this Code on several sites and no issues.

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

[Roger]

Thanks, David – I’ve added it back

[David]

Fingers crossed lol:

Change this CSS:

.no-csstransforms3d .offside--left.is-open {
        left: -100vw;
}

to

.offside, .offside--left {
    left: -100vw;
}

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

[Roger]

Thanks, but unfortunately I’m finding that the close button is still hidden behind the background overlay and not working…

[Author]

Posts