dropdown list

Hi there,

1. create a new menu with the parent menu item and its children at appearance > menus.

2. assign this menu to secondary navigation.

3. Use this PHP code to create a shortcode [secondary_navigation] for secondary navigation:

add_shortcode( 'secondary_navigation', function() {
    ob_start();

    if ( function_exists( 'generate_secondary_navigation_position' ) ) {
        generate_secondary_navigation_position();
    }

    return ob_get_clean();
} );

4. You can use this shortcode on pages.

Thank you, but now the menu also displays at the top, how can I remove it ?

Go to customizer > layout > secondary navigation, set navigation location to no navigation.

I would rather display it this way :

It requires custom HTML and JavaScript, custom JS is out of our support scope, however, it’s quite simple, so try adding the below HTML and JS via a custom HTML block, and modify the HTML code based on your needs:

<select id="myDropdown" onchange="navigate()">
  <option value="disabled selected">Select an option</option>
  <option value="https://google.com/">Option 1</option>
  <option value="https://x.com">Option 2</option>
  <option value="https://facebook.com">Option 3</option>
</select>

<script>
function navigate() {
  var dropdown = document.getElementById("myDropdown");
  var selectedOption = dropdown.options[dropdown.selectedIndex];
  if (selectedOption.value) {
    window.location.href = selectedOption.value;
  }
}
</script>

correct.

The first method should show the dropdown list with a prant menu item and multiple children menu items.

No Problem 🙂