Menu toggle and close button same size and same place

This topic has 16 replies, 4 voices, and was last updated 5 years, 4 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
November 28, 2020 at 7:32 am #1554995

Bernhard

Hello,
In the slideout menu, I’ve set the close button to inside but it is smaller, slides out and ends in a different position than the menu toggle, a bit on the left and a bit below the menu toggle.
What I like to have is the the close button static, not sliding, in the same position and size like the menu toggle. Basically, the toggle shall switch between hamburger and X.
The size of the menu toggle is 20px actually.

Also the empty space between X and navigation menu shall be smaller.

Thank you

November 28, 2020 at 9:06 am #1555150
David
Staff
Customer Support
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;
}
```
November 28, 2020 at 10:59 am #1555324

Bernhard

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?

November 28, 2020 at 4:12 pm #1555621

Leo
Staff
Customer Support

Can’t quite picture what you are after.

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

November 29, 2020 at 8:44 am #1556724

Bernhard

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.

November 29, 2020 at 2:27 pm #1557241
Tom
Lead Developer
Lead Developer
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 🙂
November 29, 2020 at 3:54 pm #1557328

Bernhard

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

November 30, 2020 at 9:43 am #1558874

Tom
Lead Developer
Lead Developer

Did you add the PHP filter I provided above?

November 30, 2020 at 11:25 am #1559046

Bernhard

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

December 1, 2020 at 9:02 am #1561064

Tom
Lead Developer
Lead Developer

Can you try the updated filter?

December 1, 2020 at 10:58 am #1561665

Bernhard

Hi Tom,
this is perfect, thank you 🙂

December 1, 2020 at 12:14 pm #1561908

Bernhard

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

December 1, 2020 at 1:42 pm #1562149
Tom
Lead Developer
Lead Developer
Awesome!

This should do it:
```
.main-navigation .navigation-search.nav-search-active {
    max-width: 50%;
    right: 0;
    left: auto;
}
```
December 1, 2020 at 11:50 pm #1562911

Bernhard

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

December 2, 2020 at 10:52 am #1564300
Tom
Lead Developer
Lead Developer
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;
}
```
Author

Posts