[Resolved] Is It Possible to do a Side Push Menu?

[Samuel]

I’m working on a site where it would be nice to use a side menu. I’ve tried to configure it in GP and when the menu is activated the whole page has an overlay and the menu comes in on top. Is there a way to have a menu that pushes the page over. This website has an example of what I’d like to do: https://www.desiringgod.org The Hamburger menu on the far right pushes the page over on desktop and on mobile completely pushes the side over. Is there a setting or some custom css that I could use to get a similar effect on GP?

[David]

Hi there,

done something similar here:

https://generatepress.com/forums/topic/slide-in-menu-that-moves-whole-site-to-the-left/#post-1130396

This pushes the entire page over ( to the left ) when Canvas is opened.

And this user wanted it to the right and to include the navigation bar:

https://generatepress.com/forums/topic/customize-advanced-hamburger-off-canvas-slide-in-menu-for-desktop-mobile/#post-1193624

Let us know

[Samuel]

Thank you–I will try this and see if I can get what I’m after.

[David]

You’re welcome

[Samuel]

I looked at the other thread and used the css, but I have two problems I can’t quite figure out:

1. The overlay still covers the entire site. What’s the best way to limit the overlay to just the menu width so it pushes the page over. Right now the page is pushing over but the overlay obscures it.

2. How can I also have the header part of the page slide over? Right now only the page content slides over.

I noticed you told the other person to use navigation as header but if I check that my header looks way off.

[David]

Can you share a link to your site?
You can edit your original topic and use the Site URL field to share a link privately

[Samuel]

Right now the site is still in local development and I don’t have a staging site read to push it to. If this helps here is a screen shot of the issue I’m trying to solve: https://www.dropbox.com/s/5ahkctegeetek33/Screen%20Shot%202020-07-24%20at%2011.31.41%20AM.png?dl=0

You can see the menu gives an overlay of the entire site and doesn’t push the header over.

If you need to see the html I can take this back up when the site is on a staging server.

[David]

Try this CSS:

.site,
.site-header {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.slide-opened .site,
.slide-opened .site-header {
    -webkit-transform: translate3d(-265px, 0, 0);
    -moz-transform: translate3d(-265px, 0, 0);
    -ms-transform: translate3d(-265px, 0, 0);
    -o-transform: translate3d(-265px, 0, 0);
    transform: translate3d(-265px, 0, 0);
}

.slideout-overlay {
    background-color: rgba(0, 0, 0, 0) !important;
}

.main-navigation:not(.slideout-navigation) .main-nav,
#mobile-header .menu-toggle {
    order: -1;
}

[Samuel]

Thank you! That did what I needed and I can make the changes I wanted to make from here. One question: when the side collapses to mobile the menu goes under the head rather than staying side by side. Here’s a screenshot: https://www.dropbox.com/s/u2z3asl7ftlu99c/Screen%20Shot%202020-07-26%20at%207.58.29%20AM.png?dl=0

What setting do I need to change so that the mobile menu keeps the side by side layout that the full width has.

[David]

in Customizer > Layout > Header you can enable the Mobile Header option.

[Samuel]

Hmm. I have tried that before but it pushes the menu link to the left side instead of the right side and makes the site logo very small. Here’s a screenshot: https://www.dropbox.com/s/4te2kmdgzx528gj/Screen%20Shot%202020-07-27%20at%204.37.40%20PM.png?dl=0

[David]

Thats not the normal behaviour of the Mobile Header – default is logo left and menu toggle right. Would need to see the site to see whats interfering with it. Any chance this can wait until you go move it to a staging site ?

[Samuel]

Yes, I will close this out and you can check it out when we go to staging.

[David]

Let us know when we can see it 🙂

[Author]

Posts