Toggle button menu different on pages

Hi there,

i am not sure i fully understand – do you want to change the Menu Item style so they all look like buttons ? Or is it just a single menu item.

Hi David

All pages of my site have a menu bar on mobile phones. That is oké. The only little issue is that for one page – https://doodiszodoodnogniet.nl/plaatjes/ – I would like to have a button as menu in stead of a bar. Is it possible to change this for one page?

The menu items can stay the way they are now.

Kind regards,
Nico

Hi,

To clarify, you want to replace the “hamburger” icon with something else?
https://share.getcloudapp.com/kpu7PgQX

Like David, I’m not sure I fully understand what you mean. Can you explain a bit more?

Perhaps provide a mockup image or a link to a reference site you’d like to replicate so we could have a better idea? Let us know.

He there

Indeed is your screenshot correct. Only the square button with the three horizontal lines is enough as menu start button so uers can activate the menu. The menu items can be as wide as 50% of the screen width.

See screenshot on https://doodiszodoodnogniet.nl/screenshots/

Left is how it is, Right is how I would like it to be.

Please only on mobile phones and other small devices.

Hi,

You can move the navigation by changing the Navigation Location to “Float left” but I’m afraid this will change how the desktop navigation looks.

But you can add this CSS once you’ve set the navigation location to “Float Left”.

@media(min-width:769px){
.inside-header.grid-container {
    flex-wrap: wrap;
}
.site-logo {
    display: block;
    width: 100%;
    text-align: center;
}
nav#site-navigation {
    margin: 0;
    width: 100%;
}
}

You may have to change how the background colors are applied.

Alternatively, you can get the GP Premium plugin so you can easily do this by simply setting a Mobile header. But I’m afraid we can’t provide support for that here.

But you can get further support for it on GP’s official forum found here:
https://generatepress.com/support/ https://generatepress.com/support/

Hi ejcabquina
Works great and works only on mobile and not pc. thanks.

Two issue’s remain:
1. I would like to have only three horizontal lines and no text in the menu-icon.
2. It would be great to have the menu icon in the header space left from the header. Like you see on the screenshot: https://doodiszodoodnogniet.nl/screenshots/

1.) The text can be removed through Appearance > Customize > Layout > Primary Navigation.

You can use PHP filters for this.

add_filter('generate_mobile_menu_label','__return_false');

2.) You’ll have to set the Navigation Location to “Float left” on Appearance > Customize > Layout > Primary Navigation as I’ve mentioned on the previous reply. The CSS provided is meant to keep the desktop layout similar even when you move the navigation location.