How can a custom navigation with bootstrap dropdown be created in Wordpress?

edit

To create a custom navigation with bootstrap dropdown in WordPress, you need to follow the below steps:

1. 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.

2. 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.

3. 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.

1. Add Bootstrap JS and CSS to your WordPress theme: You need to add the Bootstrap CSS and JS files to your WordPress theme. You can either download them from the Bootstrap website or use a CDN. To add the files to your theme, edit the functions.php file of your theme and add the following code:

function mythemescripts() { wpenqueuestyle( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/boot…', array(), '4.4.1', 'all' ); wpenqueuescript( 'jquery' ); wpenqueuescript( 'bootstrap-js', 'https://stackpath.bootstrapcdn.com/boot…', array('jquery'), '4.4.1', true ); } addaction( 'wpenqueuescripts', 'mytheme_scripts' );

1. Modify your WordPress theme's navigation code: WordPress themes have different ways of displaying menus. You need to modify your theme's navigation code to use the Bootstrap classes and create the dropdowns. You can use the WordPress menu walker class to do it. Here is an example of how to modify the navigation code:

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(), ) );

1. Save your changes and preview your website: Save your changes in the functions.php file and the navigation code. After that, refresh your website and check if the dropdown menu is working correctly.

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.