https://github.com/alexweblab/bootstrap-5-wordpress-navbar-walker

Bootstrap 5 WordPress navbar walker menu.
https://github.com/alexweblab/bootstrap-5-wordpress-navbar-walker

bootstrap-5 bootstrap5 navwalker wordpress wordpress-theme

Last synced: 3 days ago
JSON representation

Bootstrap 5 WordPress navbar walker menu.

• Host: GitHub
• URL: https://github.com/alexweblab/bootstrap-5-wordpress-navbar-walker
• Owner: AlexWebLab
• License: mit
• Created: 2020-12-18T06:45:00.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-12-08T20:30:36.000Z (about 1 year ago)
• Last Synced: 2024-12-23T08:08:54.718Z (3 days ago)
• Topics: bootstrap-5, bootstrap5, navwalker, wordpress, wordpress-theme
• Language: PHP
• Homepage: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
• Size: 19.5 KB
• Stars: 255
• Watchers: 11
• Forks: 105
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootstrap 5 WordPress navbar walker menu

[bootstrap-5-wordpress-navbar-walker](https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker)

## How to use:

1. Copy and paste the [bootstrap_5_wp_nav_menu_walker](https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/blob/main/functions.php) class into the functions.php file of your theme;

2. Register a new menu by adding the follow code into the functions.php file of your theme:

```php

register_nav_menu('main-menu', 'Main menu');

```

3. Add the following html code in your header.php file or wherever you want to place your menu:

```html

    


        Navbar

        

            

        

        

        


             'main-menu',

                'container' => false,

                'menu_class' => '',

                'fallback_cb' => '__return_false',

                'items_wrap' => '
%3$s
',

                'depth' => 2,

                'walker' => new bootstrap_5_wp_nav_menu_walker()

            ));

            ?>

        

    


```

### v1.3.0 Added support for dropdown menu (responsive) alignment: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment

**Here is how it works**:

- From _Appearance -> Menus_ page of WordPress, check the _CSS Classes_ checkbox under _Screen Options_;

- Add a _Custom Link_ with "#" in the URL field (this would be the parent of your dropdown);

- On the _CSS Classes_ field add any of the following alignment classes: 'dropdown-menu-start', 'dropdown-menu-end', 'dropdown-menu-sm-start', 'dropdown-menu-sm-end', 'dropdown-menu-md-start', 'dropdown-menu-md-end', 'dropdown-menu-lg-start', 'dropdown-menu-lg-end', 'dropdown-menu-xl-start', 'dropdown-menu-xl-end', 'dropdown-menu-xxl-start', 'dropdown-menu-xxl-end';

- If any of the mentioned above class is detected, then they will automatically copied into the _ul.dropdown-menu_ element following the Bootstrap 5 structure;

- Any other class that is not related to the dropdown menu alignment will stay where it is.