[Support request] Slideout Menu – Full Width

[Roger]

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

Thanks!

[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.

[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?

[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;
}

[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

[Roger]

Ok, done.

[David]

So in the above CSS change:

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

for:

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

[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.

[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;
}

[Roger]

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

[Author]

Posts