Repository navigation
add search form and place hamburger icon on the right #541
Description
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.
Activity
IanDelMar commentedon May 1, 2024
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
DeveloperAliRahi commentedon May 1, 2024
something exactly like the first sample on this page:
https://getbootstrap.com/docs/4.0/components/navbar/
DeveloperAliRahi commentedon May 2, 2024
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:
`
IanDelMar commentedon May 4, 2024
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 commentedon May 4, 2024
If that's what you want, you can try this
The
'container' => falsesuppresses 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%.