Comments (7)
Bootstrap 4.5.0:
HTML/PHP:
<nav id="site-navigation" class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Navbar</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="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'depth' => 2, // 1 = with dropdowns, 0 = no dropdowns.
'container' => 'false',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
)
);
?>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn btn-outline-secondary my-2 my-sm-0">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- #container -->
</nav><!-- #site-navigation -->
WP BOOTSTRAP NAVWALKER:
https://wp-bootstrap.github.io/wp-bootstrap-navwalker/#usage
from wp-bootstrap-navwalker.
You sure can!
Since the walker only outputs the nav list you can just add it to the code as you normally would. If you set the wp_nav_menu()
functions 'container'
variable to false you can wrap the menu your own code and include the search form.
The code below will create a responsive navbar with brand text & a search form; while using the walker class to process the menu items.
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
from wp-bootstrap-navwalker.
delicious, thank you.
from wp-bootstrap-navwalker.
Hi is there a way to get the search form as the last listing within the navbar (before the closing ul) so that I have the search form displayed totally on the right. The method above is displaying the search form before the nav listings.
from wp-bootstrap-navwalker.
If you set container to false instead of div, the div tag disappears and the navbar becomes a complete mess. Especially in the mobile version. This is not a solution.
from wp-bootstrap-navwalker.
If you set container to false instead of div, the div tag disappears and the navbar becomes a complete mess. Especially in the mobile version. This is not a solution.
Wrap the call to wp_nav_menu() in the div and that's a non-issue.
from wp-bootstrap-navwalker.
Thank you, pattonwebz. It works. I'm mad at myself for not seeing this earlier. :)
from wp-bootstrap-navwalker.
Related Issues (20)
- Useless PHP unit tests for multisites?
- Third Level menu works, but it needs toggle icon in mobile to avoid hover problem
- Navwalker dropdown doesn't remain open on click HOT 5
- How to add an additional first item to all dropdown without using wordpress menu management. HOT 7
- Grant repo access to IanDelMar HOT 3
- Skipping data-toggle attribute and dropdown-toggle class (for mobile and tablet viewports) HOT 3
- Bootstrap 5 - How to make parent dropdown links clickable instead of # HOT 2
- Duplicate / Repeat parent menu item as first item in child menu HOT 4
- Menu button disappears when clicked HOT 8
- Active Class Font Color Not Working HOT 3
- WP Bootstrap Nav walker disappeared after reloading template HOT 3
- How to Display sub items if the Menu first level is Category selected?
- Dropdown is not working HOT 39
- How can I modify the closing li tag HOT 1
- Warning: Array to string conversion on line 149 in PHP 8.2
- Dropdown exit Animation HOT 1
- Link with dropdown associated to a page contains no URL but a #. HOT 1
- Mobile menu nog showing HOT 1
- add search form and place hamburger icon on the right HOT 5
- Future?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wp-bootstrap-navwalker.