Menu toggle and close button same size and same place

Hi there,

try adding this CSS:

.slideout-navigation button.slideout-exit {
    padding-top: 10px !important;
}
.slideout-navigation button.slideout-exit .gp-icon svg {
    height: 1.5em;
    width: 1.5em;
}

Yes, now I shall move the X some px to the right.
My idea is to have something like in this sample (on mobile, but with the toggle on the left), a fixed toggle open / close - but not the whole screen covered by the navigation menu.
Is this possible?

Can't quite picture what you are after.

The example site you've linked is the default mobile menu layout without the slideout panel.

Hello,
what I would like to have is the close button in the same place like the open (hamburger) button and the slideout menu starting below the header / primary navigation.

If this is not possible, the slideout shall start inside the container. Actually it starts outside and for this reason the x is not in the same place as the hamburger on desktop.
Furthermore, the x is a little bit below the hamburger. The first menu item (language switcher) shall be on the height of the page hero.
I have prepared two screenshots of the actual situation and the desired layout in my Googledrive.
I have matched screenshots with the menu open and closed.

Hi there,

It's not really built for this, but let's see if we can make it work.

First, let's make the off-canvas toggle show a closed icon when selected:

add_filter( 'generate_off_canvas_toggle_output', function() {
    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    $svg_icon = generate_get_svg_icon( 'menu-bars', true );

    return sprintf(
        '<span class="menu-bar-item slideout-toggle hide-on-mobile %2$s"><a href="#">%1$s%3$s</a></span>',
        $svg_icon,
        $svg_icon ? 'has-svg-icon' : '',
        '' !== $settings['off_canvas_desktop_toggle_label'] ? '<span class="off-canvas-toggle-label">' . wp_kses_post( $settings['off_canvas_desktop_toggle_label'] ) . '</span>' : ''
    );
} );

Now let's add some CSS:

.menu-bar-item.slideout-toggle {
    z-index: 100002;
}

.slideout-toggle .gp-icon svg:nth-child(2), 
.slide-opened .slideout-toggle .gp-icon svg:nth-child(1) {
    display: none;
}

.slide-opened .slideout-toggle .gp-icon svg:nth-child(2) {
    display: block;
}

.slideout-navigation button.slideout-exit {
    display: none;
}

.slideout-navigation .main-nav {
    margin-top: 50px;
}

@media (max-width: 768px) {
    .slideout-toggle.hide-on-mobile {
        display: block !important;
        order: -10;
        margin-right: auto;
    }

    .main-navigation .menu-toggle {
        display: none;
    }

    .menu-bar-items {
        width: 100%;
    }
}

That should do it :)

Hi Tom,
this looks much better but the close button (x) is missing. Is it possible to fix this?
Thank you

Did you add the PHP filter I provided above?

Yes. By the way, the menu label does no more change language. Polylang uses the field off_canvas_desktop_toggle_label

Can you try the updated filter?

Hi Tom,
this is perfect, thank you :)

Still one thing: Is it possible to limit the search bar to 50% width, otherwhise it's in conflict with the menu toggle.

Awesome!

This should do it:

.main-navigation .navigation-search.nav-search-active {
    max-width: 50%;
    right: 0;
    left: auto;
}

This is strange, on mobile the search bar is correct 50% on the right, but on desktop it is 50% on the left.

On some mobile phones (at < 768px ?) it shows the menu text and toggle doubled (even without the CSS for the search bar).

Your custom CSS is being added above the core CSS. I've made it more specific so it should work: https://generatepress.com/forums/topic/menu-toggle-and-close-button-same-size-and-same-place/#post-1562149

The double toggle is the same issue. In your CSS, change this:

.main-navigation .menu-toggle {
    display: none;
}

To this:

.main-navigation .menu-toggle {
    display: none !important;
}