add search form and place hamburger icon on the right

[aliwebd4b]

Steps to reproduce the issue: You can visit appd4b.com

I need to put the humbrguer icon on the right and logo on the left. I did the following:

`

    <a class="navbar-brand" href="/"><img src="/wp-content/uploads/2024/04/WEBD4B-removebg-preview-e1713467317276.png"></a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'main',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
      <span class="navbar-toggler-icon"></span>
      </button>
        <?php //get_search_form(); ?>
    </div>

</nav>

`

but now when I click on the icon the icon jumps below the nav item on the left?

I also wanted to see if I were to add the search form I created,
how would I get it to show on the drop down when you click on the icon?

as you can see I have it commented out right now becuase it stays outside of the dropdown, next to logo and icon on mobile.

[IanDelMar]

Do you want a non-expanding navbar with the logo on the left, followed by a search form, and then the toggle?

Then try this

?>


<a class="navbar-brand" href="/"><img src="/wp-content/uploads/2024/04/WEBD4B-removebg-preview-e1713467317276.png"></a>
<?php get_search_form(); ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
  <span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu( array(
    'theme_location'    => 'main',
    'depth'             => 2,
    'container'         => 'div',
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'bs-example-navbar-collapse-1',
    'menu_class'        => 'navbar-nav',
    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
    'walker'            => new WP_Bootstrap_Navwalker(),
) );
?>

[aliwebd4b]

something exactly like the first sample on this page:
https://getbootstrap.com/docs/4.0/components/navbar/

[aliwebd4b]

Hi tried the code, it didnt work. As you can see in the sample provided, the search form goes inside the dropdown on mobile. And I want the search form on the other right end not middle:

`

    <a class="navbar-brand" href="/"><img src="/wp-content/uploads/2024/04/WEBD4B-removebg-preview-e1713467317276.png"></a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'main',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
      <span class="navbar-toggler-icon"></span>
      </button>
        <?php //get_search_form(); ?>
    </div>

</nav>

`

[IanDelMar]

Your desired results is logo - menu - searchform if the navbar is expanded and logo - toggle (search form inside the menu) if the navbar is not expanded?

[IanDelMar]

Your desired results is logo - menu - searchform if the navbar is expanded and logo - toggle (search form inside the menu) if the navbar is not expanded?

If that's what you want, you can try this

?>


    <a class="navbar-brand" href="/"><img src="/wp-content/uploads/2024/04/WEBD4B-removebg-preview-e1713467317276.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <?php
      wp_nav_menu( array(
        'theme_location'    => 'main',
        'depth'             => 2,
        'container'         => false,
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker(),
      ) );
      get_search_form();
      ?>
    </div>
  </div>
</nav>

The 'container' => false suppresses the output of the container around the unordered list. This allows you to add the search form after the list but before the container closes. Note that the container must then be added manually. Also, note that placing the toggle below the menu, as you did, pushes the toggle below the menu when you open the collapsed menu because the menu - if open - has a width of 100%.