[Resolved] How do I create a dropdown button with toggle functionality?

[webyogi]

Hi!

How do I create a basic drop-down button with toggle functionality like in the link below using GeneratePress?

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Thanks in advance.

[webyogi]

please can you somebody from support respond to my query. thanks.

[David]

Hi there,

use a Navigation Menu block, you can add single menu item, with a list of drop down menu items.

[webyogi]

Ok am trying it out as we speak.

How do I change the down arrow icon for the drop down to a “+” sign and upon expansion/click change it to “-” ? thanks

[David]

Can i see what you have so far ?

[webyogi]

unfortunately can’t share the link but can do a screen shot

[Ying]

Hi there,

Are you using the WP navigation block?

If so, GP doesn’t have control over it as its a WP core block, I’ve found this support topic might be helpful:
https://wordpress.org/support/topic/customize-navigation-block-hamgurger-icon/

For more info about the navigation block: https://wordpress.com/support/site-editing/theme-blocks/navigation-block/

If you have more questions regarding the navigation block, you can reach out to WP’s support.

[webyogi]

Yes tried creating with the WP Navigation Block as suggested by David.

So my requirement is simple. I would like to create a drop down button in the content area called, “Product +” which has a submenu/options/list called “Product 1”, “Product 2” … and links to their respective product pages. When clicked on the “Product” button it should show the product list as above and change the button text to “Product -“, when clicked again is should hide the product list and change back the product button text to “Product +”.

Using Navigation Block to do this kinda works but not sure if it the most elegant solution but unable to simulate the toggle icon change “+/-” upon expand and collapse. Bootstrap’s Basic DropDown (with the Toggle) is simple near perfect solution.

https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Any help will be much appreciated.

[David]

Add this CSS to your site:

.custom-nav .wp-block-navigation__container > li > button .wp-block-navigation-item__label:after {
    padding: 0 5px;
    font-size: 1.2em;
    font-weight: bold;
    content: '+';
}
.custom-nav .wp-block-navigation__container > li > button[aria-expanded="true"] .wp-block-navigation-item__label:after {
    content: '-';
}
.custom-nav .wp-block-navigation__container > li > button + .wp-block-navigation__submenu-icon {
    display: none;
}

2. Select the Navigation block in the editor, and in Advanced > Additonal CSS Class(es) add: custom-nav

[webyogi]

It works! Thank you Thank you Thank you!

[David]

You’re welcome

[Author]

Posts