1 | initial version |
To create a custom navigation with bootstrap dropdown in WordPress, you need to follow the below steps:
Create a new menu in WordPress: Go to Appearance > Menus to create a new menu. Give it a name and click on the "Create Menu" button.
Add Pages/Menu items to your menu: Select the pages you want to add to your menu and click on the "Add to Menu" button.
Add dropdown classes to your menu items: For that, click on the "Screen Options" button on the top-right corner of the page, select "CSS Classes," and click on "Apply." Now, you can see a new field for CSS Classes in each menu item. Add the following classes to create a dropdown:
3.1 Add "dropdown" class to the parent menu item.
3.2 Add "dropdown-toggle" class to the parent menu item. This class will make the parent menu item clickable.
3.3 Add "dropdown-menu" class to the child menu items. This class will create a dropdown menu under the parent menu item.
function mythemescripts() { wpenqueuestyle( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', array(), '4.4.1', 'all' ); wpenqueuescript( 'jquery' ); wpenqueuescript( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), '4.4.1', true ); } addaction( 'wpenqueuescripts', 'mytheme_scripts' );
wpnavmenu( array( 'themelocation' => 'primary', 'container' => 'nav', 'containerclass' => 'navbar navbar-expand-lg navbar-light bg-light', 'menuclass' => 'navbar-nav mr-auto', 'fallbackcb' => 'WPBootstrapNavwalker::fallback', 'walker' => new WPBootstrapNavwalker(), ) );
Note: If you're not comfortable with coding, you can use a plugin that already has a Bootstrap navigation menu. Some popular plugins are WP Bootstrap Navwalker and Bootstrap 4 Nav Menu.