Header inside Off-Canvas Panel

Hi there,

maybe it would better to keep the Header Visible with the Off Cavnas open?
Tom provides a solution for that here:

https://generatepress.com/forums/topic/menu-toggle-and-close-button-same-size-and-same-place/#post-1557241

Hi David,
I've added that filter and CSS but it doesn't appear to have helped?

Now add this CSS so the Header remains in view when the canvas is open:

/* Shift off canvas below site header*/
#generate-slideout-menu {
  top: 150px;
}
/* reduce and fix top padding of inside canvas */
.slideout-navigation.do-overlay .inside-navigation {
  padding-top: 50px;
}
/* Stop Body from scrolling when canvas is open */
body.slide-opened {
  overflow: hidden;
}

Thank you, it's coming along now. Not sure why the contact link is wrapping onto a new line though?

Use this CSS to keep the menu items inline:

@media(min-width: 769px) {
  .main-navigation ul {
    display: flex;
    align-items: center;
  }
}

Thanks so much for all your help, its looking good now. Ideally I want the hamburger icon hidden and just show the close X when its opened. Not sure if thats going to be possible though. Also, the content of the slide-out is very close to the bottom of the screen, adding padding doesn't seem to help.

Hi there,

Ideally I want the hamburger icon hidden and just show the close X when its opened. Not sure if thats going to be possible though.

I assume you only want the word "Contact" to be displayed and completely hide the hamburger?

If so, add this CSS:

.gp-icon.icon-menu-bars svg:first-child {
    display: none;
}

With this, the hamburger is hidden but the X close button is kept visible.

Also, the content of the slide-out is very close to the bottom of the screen, adding padding doesn’t seem to help.

You have this CSS on your child theme's CSS that's pushing the slide-out further down.

#generate-slideout-menu {
    top: 150px;
}

You should remove or reduce the value of you want it to move further up.

Thank you for all the help with this, I'm still working on it.

Ideally I need the header area in the same grey as the canvas panel, is there any way to achieve this?

Also on mobile view, when opening the menu I need to show the navigation links above the contact form.

Ideally I need the header area in the same grey as the canvas panel, is there any way to achieve this?

Do you mean on mobile? If so try this:

@media (max-width: 768px) {
    .site-header {
        background-color: #d8d8d8;
    }
}

on mobile view, when opening the menu I need to show the navigation links above the contact form.

I see you are using GB to build the slide-out menu, then you just need to modify the container width under Grid wrap. Your current setting is 25% for links and 75% for contact form, change them both to 100% under mobile view should work.

For the header I need it grey for both mobile and desktop.

Regarding the mobile menu, I need the main navigation links, i.e) Works etc listed above the form. I think I may need to add them manually to the GB block and then hide them on desktop?

For the header I need it grey for both mobile and desktop.

In that case, you just need to set the header background color to grey in Customizer > Colors > Header.

For the mobile menu, which hook are you using now? You can try after_slideout_menu hook for the GB container, and assign a menu to off canvas panel at Appearance > Menus.

https://www.screencast.com/t/WRCJU2ONK1x

Sorry, I meant I only want the header area grey when the contact off-canvas panel is open so it matches it.

Will have a look at using your solution for the mobile menu, thanks.

In that case, try this CSS for header when off canvas is open :)

body.slide-opened .site-header {
    background-color: #d8d8d8;
}

Thanks so much for this, works great. I now have the mobile menu in the off-canvas panel too.
However, I've noticed a couple of issues:

- the hamburger icon is not displaying, I have icon type set to SVG in the customizer settings.
- on mobile when the menu/canvas is open the close/X disappears so theres no way to close the menu

Also I want the hamburger icon/menu toggle floated to the right and logo on the left for mobile view.

Thanks.