Support Navbar in Bootstrap 4

brettalton commented 7 years ago

Any plans to support Navbar in Bootstrap 4?

v4 https://v4-alpha.getbootstrap.com/components/navbar/#supported-content

v3 https://getbootstrap.com/components/#navbar-default

It's much less verbose than Bootstrap 3, might be easier to support?

I would add a pull request but I can't dissect your code that quickly.

bke-daniel commented 7 years ago

+1

pattonwebz commented 7 years ago

Support for v4 is coming and will be released officially closer to the date that BS4 comes out of alpha. For the moment I pushed a branch that works with BS4.

They have made the markup much cleaner for v4 compared to v3 but also changed completely how it works responsively. It now needs a class on the button (in the example below it's .hidden-lg-up) and one on the collapsing element (in the example it's .navbar-toggleable-md).

Here's some example code that you could use along with the v4 branch of the walker to create a responsive top menu. Just tested this with the v4 alpha5 and works for me, let me know if you have any issue getting the code to work.

<nav class="navbar navbar-light navbar-fixed-top" role="navigation">
    <!-- Branding and toggle button can be grouped inside a .navbar-header -->
    <div class="navbar-header">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-toggleable-md navbar-collapse navbar-top-collapse" id="collapsingNavbar">
        <?php
        wp_nav_menu( array(
            'menu'       => 'nav_topbar',
            'theme_location' => 'nav_topbar',
            'depth'      => 2,
            'container'  => false,
            'menu_class' => 'nav navbar-nav',
            'fallback_cb' => 'topbar_nav_fallback',
            'walker' => new wp_bootstrap_navwalker())
        );
        ?>
    </div><!-- /.navbar-collapse -->
</nav>

brettalton commented 7 years ago

The <a></a> within the <li class="nav-item"></li> needs to be <a class="nav-link"></li>!

https://github.com/twittem/wp-bootstrap-navwalker/compare/v4...brettalton:patch-1

For me, I used,

<nav class="navbar navbar-light">
    <div class="container">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-xs" id="navbar-header">
<?php
    wp_nav_menu( array(
        'menu'              => 'mymenu',
        'theme_location'    => 'mytheme',
        'depth'             => 2,
        'container'         => '',
        'container_class'   => '',
        'container_id'      => '',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );
?>
    </div>
</nav>

which looks eerily similar to yours.

Creadecon commented 7 years ago

Hey :-)

I could need some help. Currently i try to get the navwalker get working in bootstrap 4alpha6.

I used this wp_bootstrap_navwalker.php

my function.php looks like this:

// Register Custom Navigation Walker
require_once get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'bootstrap4wp' ),
) );

And in my header.php i used this code:

<nav class="navbar navbar-light">
    <div class="container">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-xs" id="navbar-header">
            <?php
                wp_nav_menu( array(
                    'menu'              => 'Testing Menu',
                    'theme_location'    => 'bootstrap4wp',
                    'depth'             => 2,
                    'container'         => '',
                    'container_class'   => '',
                    'container_id'      => '',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
    </div>
</nav>

In the backend i see the registered navigation and i can save the nav, but in frontend i dont see my :-/

Sorry about my bad english :D

Creadecon commented 7 years ago

Ah, sorry, the format of the code i posted here is wrong. How can i add code to this post like you both did this? :D

I just looked into the code of the frontend and i saw that wordpress create my navbar right. But it's invisible for some reason.

bootstrap4navwalker

brettalton commented 7 years ago

what version of bootstrap are you using?

On Fri, Jan 20, 2017 at 4:38 AM Creadecon notifications@github.com wrote:

Ah, sorry, the format of the code i posted here is wrong. How can i add code to this post like you both did this? :D

I just looked into the code of the frontend and i saw that wordpress create my navbar right. But it's invisible for some reason.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/twittem/wp-bootstrap-navwalker/issues/238#issuecomment-274024724, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGnezvZvibPtdIm22ixfj_7S8P69ojZks5rUICfgaJpZM4K_mS7 .

Creadecon commented 7 years ago

I'm using Bootstrap4 alpha6

pattonwebz commented 7 years ago

Hey @Creadecon, you can add codeblocks by wrapping them in 3 backticks - '```'. A single backtick around inline code like that and 3 backticks around a longer or multi-line codeblock. I edited you comment above so you could see an example. You should be able to re-edit you comment and see how it is done.

As far as your issue of not seeing the menu in the front end. They changed the markup of navbars between alpha5 and alpha6. The markup should now be something more like this:

<nav class="navbar navbar-light navbar-toggleable-sm">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-collapse" id="navbar-header">
            <?php
                wp_nav_menu( array(
                    'menu'              => 'Testing Menu',
                    'theme_location'    => 'bootstrap4wp',
                    'depth'             => 2,
                    'container'         => '',
                    'container_class'   => '',
                    'container_id'      => '',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
    </div>
</nav>

The differences are the .navbar-toggleable-sm is now on the root <nav> and the <div> now has .navbar-collapse instead. Also the .hidden-sm-up class is no longer needed on the button.

robertandrews commented 7 years ago

I couldn't get this to properly show the menu items using the correct style, whereas I was able to using bs4navwalker

I was already running the latter, but tested swapping it for yours. Not sure if I was doing something wrong.

pattonwebz commented 7 years ago

Latest version of the v4 branch has been updated and now works correctly with the latest Bootstrap 4 (currently at alpha 6). There are also several small fixes included in the future release.

awran5 commented 7 years ago

This walker bs4navwalker work best for alpha 6. It uses <div><a> wrapper for the dropdown-menu not <ul><li><a>

pattonwebz commented 7 years ago

@awran5 Glad you have a version that works for you :) Is your preference for <div><a> due to accessibility reasons?

kanlukasz commented 7 years ago

Does it work fine with the latest version bootstrap v4.0.0-beta ?

pattonwebz commented 7 years ago

@kanlukasz, I have a PR in place that works for the v4 branch to make it work correctly with the beta. It seems to be running fine on production but I have not done a huge amount of testing of different kinds of menus or arrangements.

clheppell commented 7 years ago

The class .dropdown-item needs to be applied to menu items with a parent.

At the moment, if you are using a .navbar-dark, Bootstrap makes the text white and this is inherited on the dropdown menu (which on a white bg means that you can't see it.)

At the moment, I'm getting around this by overriding some CSS so to me this isn't too major, but it might be for some others.

pattonwebz commented 7 years ago

Hey @clheppell, thanks for reporting this. I can see the issue and can work on getting a fix for this in place for the v4 version tonight today :)

EDIT: Just pushed a fix for this into the v4 branch.

brettalton commented 7 years ago

Just to document for others what @clheppell and @pattonwebz were talking about, this is the related change that pattonwebz commited: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/commit/5632e4adddabe818cda61bed4e2d713348df0d8b.

klevinkona commented 6 years ago

Hello Guys, i installed it and work ok, but only with 1-2 depth, once i do it with depth 3-4 it display all the sub menus

 <?php
            wp_nav_menu( array(
                'menu'              => 'main',
                'theme_location'    => 'primary',
                'depth'             => 6,
                '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())
            );
        ?>

The html code i need to convert to bootstrap with wordpress is this:

    <div id="menu" class="collapse">
                          <ul class="nav navbar-nav">
                            <li class="right active"> <a href="#">Home</a> <span class="arrow"></span>
                              <ul class="dm-align-2">
                                <li> <a href="index2.html">Home Page 2</a></li>
                                <li> <a href="index3.html">Home Page 3</a></li>
                                <li> <a href="index4.html">Home Page 4</a></li>
                                <li> <a href="index5.html">Home Page 5</a></li>
                                <li> <a href="index6.html">Home Page 6</a></li>
                                <li> <a href="index7.html">Home Page 7</a></li>
                                <li> <a href="index8.html">Home Page 8</a></li>
                                <li> <a href="index9.html">Home Page 9</a></li>
                                <li> <a href="index10.html">Home Page 10</a></li>
                                <li class="active"> <a href="index.html">Home Default</a></li>

                              </ul>
                            </li>
                            <li> <a href="slider-kenburns.html">Pages</a> <span class="arrow"></span>
                              <ul class="dm-align-2">
                                <li> <a href="#">About <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                  <ul>
                                    <li> <a href="page-about1.html">About Style 1</a> </li>
                                    <li> <a href="page-about2.html">About Style 2</a> </li>
                                    <li> <a href="page-about3.html">About Style 3</a> </li>
                                    <li> <a href="page-about4.html">About Style 4</a> </li>
                                    <li> <a href="page-about5.html">About Me</a> </li>
                                  </ul>
                                </li>
                                <li> <a href="#">Services <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                  <ul>
                                    <li> <a href="page-services1.html">Services Style 1</a> </li>
                                    <li> <a href="page-services2.html">Services Style 2</a> </li>
                                    <li> <a href="page-services3.html">Services Style 3</a> </li>
                                    <li> <a href="page-services4.html">Services Style 4</a> </li>
                                  </ul>
                                </li>

                                <li> <a href="#">Team <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                  <ul>
                                    <li> <a href="page-team-classic.html">Team Classic</a> </li>
                                    <li> <a href="page-team-parallax.html">Team Parallax</a> </li>
                                    <li> <a href="page-team-dark.html">Team dark Style</a> </li>
                                    <li> <a href="page-team-creative.html">Team Creative</a> </li>
                                  </ul>
                                </li>

                                <li> <a href="#">FAQ <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                  <ul>
                                    <li> <a href="page-faq1.html">FAQ Style 1</a> </li>
                                    <li> <a href="page-faq2.html">FAQ Style 2</a> </li>
                                  </ul>
                                </li>
                                <li> <a href="#">Contact<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                  <ul>
                                   <li> <a href="page-contact.html">Contact Classic</a> </li>
                                   <li> <a href="page-contact-left-sidebar.html">Contact Left Sidebar</a> </li>
                                   <li> <a href="page-contact-right-sidebar.html">Contact Right Sidebar</a> </li>
                                   <li> <a href="page-contact-map.html">Full Width Map</a> </li>
                                   <li> <a href="page-contact-parallax.html">Contact Parallax</a> </li>
                                   <li> <a href="page-contact-captcha.php">Contact With Captcha</a> </li>
                                 </ul>
                               </li>
                               <li> <a href="#">Other Pages 1<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="page-full-width.html">Full Width Page</a></li>
                                  <li> <a href="page-left-sidebar.html">Left Sidebar</a></li>
                                  <li> <a href="page-right-sidebar.html">Right Sidebar</a></li>
                                  <li> <a href="page-packages.html">Package Plans</a></li>
                                  <li> <a href="page-careers.html">Careers</a></li>
                                  <li> <a href="page-coming-soon.html">Coming Soon</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">Other Pages 2<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="page-login.html">Login</a></li>
                                  <li> <a href="page-register.html">Register</a></li>
                                  <li> <a href="page-sitemap.html">Sitemap</a></li>
                                  <li> <a href="page-maintenance.html">Maintenance</a></li>
                                  <li> <a href="page-404.html">404 Error Page</a></li>
                                  <li> <a href="page-404-2.html">404 Error Page 2</a></li>
                                </ul>
                              </li>

                            </ul>
                          </li>
                          <li> <a href="slider-kenburns.html">Features</a> <span class="arrow"></span>
                            <ul class="dm-align-2">
                              <li> <a href="#">Sliders <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="slider-kenburns.html">KenBurns</a> </li>
                                  <li> <a href="slider-parallax.html">Parallax</a> </li>
                                  <li> <a href="slider-3d.html">3D</a> </li>
                                  <li> <a href="slider-carousel.html">Carousel</a> </li>
                                  <li> <a href="slider-gallery.html">Gallery</a> </li>
                                  <li> <a href="slider-scroll-effect.html">Scroll Efects</a> </li>
                                  <li> <a href="slider-vimeo.html">Vimeo Video</a> </li>
                                  <li> <a href="slider-youtube.html">Youtube Video</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Headers <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="index5.html">Header Light</a> </li>
                                  <li> <a href="index7.html">Header Dark</a> </li>
                                  <li> <a href="index4.html">Header Modern</a> </li>
                                  <li> <a href="index.html">Header Transparent</a> </li>
                                  <li> <a href="index6.html">Header Creative</a> </li>
                                  <li> <a href="index8.html">Header Left Logo</a> </li>
                                  <li> <a href="index6.html">Header Center Logo</a> </li>
                                  <li> <a href="index7.html">Header White</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Menu Styles <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="index3.html">Menu Transparent</a> </li>
                                  <li> <a href="index8.html">Menu Left logo</a> </li>
                                  <li> <a href="index6.html">Menu Right Logo</a> </li>
                                  <li> <a href="index.html">Menu Dark</a> </li>
                                  <li> <a href="index6.html">Menu Center Logo</a> </li>
                                  <li> <a href="index4.html">Menu Boxed</a> </li>
                                  <li> <a href="index6.html">Menu Center</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Loading Styles<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="loading-style1.html">Loading Style 1</a> </li>
                                  <li> <a href="loading-style2.html">Loading Style 2</a> </li>
                                  <li> <a href="loading-style3.html">Loading Style 3</a> </li>
                                  <li> <a href="loading-style4.html">Loading Style 4</a> </li>
                                  <li> <a href="loading-style5.html">Loading Style 5</a> </li>
                                  <li> <a href="loading-style6.html">Loading Style 6</a> </li>
                                  <li> <a href="loading-style7.html">Loading Style 7</a> </li>
                                  <li> <a href="loading-style8.html">Loading Style 8</a> </li>
                                  <li> <a href="loading-style9.html">Loading Style 9</a> </li>
                                  <li> <a href="loading-style10.html">Loading Style 10</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Footer Styles<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="index3.html">Footer Dark</a> </li>
                                  <li> <a href="index7.html">Footer Light</a> </li>
                                  <li> <a href="index.html">Footer Simple</a> </li>
                                  <li> <a href="index3.html">Footer Parallax</a> </li>
                                  <li> <a href="index2.html">Footer Big</a> </li>
                                  <li> <a href="index3.html">Footer Modern</a> </li>
                                  <li> <a href="shortcodes-maps.html">Footer With Map</a> </li>
                                  <li> <a href="index.html">Footer Classic</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Videos<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="shortcodes-videos.html">Youtube Videos</a> </li>
                                  <li> <a href="shortcodes-videos.html">Vimeo Videos</a> </li>
                                  <li> <a href="shortcodes-videos.html">HTML 5 Videos</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Layered PSD Files</a> </li>
                              <li> <a href="#">Unlimited Colors</a> </li>
                              <li> <a href="#">Wide & Boxed</a> </li>
                            </ul>
                          </li>
                          <li class="mega-menu"> <a href="header-style3.html">Portfolio</a> <span class="arrow"></span>
                            <ul>
                              <li> <a href="#" title="home samples">Portfolio columns</a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="portfolio-1-columns.html"><i class="fa fa-angle-right"></i> &nbsp; One Column</a> </li>
                                  <li> <a href="portfolio-2-columns.html"><i class="fa fa-angle-right"></i> &nbsp; Two Column</a> </li>
                                  <li> <a href="portfolio-3-columns.html"><i class="fa fa-angle-right"></i> &nbsp; Three Column</a> </li>
                                  <li> <a href="portfolio-4-columns.html"><i class="fa fa-angle-right"></i> &nbsp; Four Column</a> </li>
                                  <li> <a href="portfolio-5-columns.html"><i class="fa fa-angle-right"></i> &nbsp; Five Column</a> </li>
                                  <li> <a href="portfolio-6-columns.html"><i class="fa fa-angle-right"></i> &nbsp; Six Column</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Portfolio Styles</a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="portfolio-masonry.html"><i class="fa fa-angle-right"></i> &nbsp; Masonry</a> </li>
                                  <li> <a href="portfolio-masonry-projects.html"><i class="fa fa-angle-right"></i> &nbsp; Masonry-Projects</a> </li>
                                  <li> <a href="portfolio-mosaic.html"><i class="fa fa-angle-right"></i> &nbsp; Mosaic</a> </li>
                                  <li> <a href="portfolio-mosaic-flat.html"><i class="fa fa-angle-right"></i> &nbsp; Mosaic-Flat</a> </li>
                                  <li> <a href="portfolio-mosaic-projects.html"><i class="fa fa-angle-right"></i> &nbsp; Mosaic-Projects</a> </li>
                                  <li> <a href="portfolio-slider-projects.html"><i class="fa fa-angle-right"></i> &nbsp; slider-projects</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Portfolio Styles</a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="portfolio-full-width.html"><i class="fa fa-angle-right"></i> &nbsp; Full Width</a> </li>
                                  <li> <a href="portfolio-gallery.html"><i class="fa fa-angle-right"></i> &nbsp; Gallery</a> </li>
                                  <li> <a href="portfolio-classic.html"><i class="fa fa-angle-right"></i> &nbsp; Classic</a> </li>
                                  <li> <a href="portfolio-nospace.html"><i class="fa fa-angle-right"></i> &nbsp; No Space</a> </li>
                                  <li> <a href="portfolio-boxed-size.html"><i class="fa fa-angle-right"></i> &nbsp; Boxed Size</a> </li>
                                  <li> <a href="portfolio-modern.html"><i class="fa fa-angle-right"></i> &nbsp; Modern</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Portfolio Single Page</a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="portfolio-parallax.html"><i class="fa fa-angle-right"></i> &nbsp; Parallax Image</a> </li>
                                  <li> <a href="portfolio-video.html"><i class="fa fa-angle-right"></i> &nbsp; Video Background</a> </li>
                                  <li> <a href="portfolio-left-sidebar.html"><i class="fa fa-angle-right"></i> &nbsp; Left Sidebar</a> </li>
                                  <li> <a href="portfolio-right-sidebar.html"><i class="fa fa-angle-right"></i> &nbsp; Right Sidebar</a> </li>
                                  <li> <a href="portfolio-carousel.html"><i class="fa fa-angle-right"></i> &nbsp; Carousel</a> </li>
                                  <li> <a href="portfolio-fullwidth-image.html"><i class="fa fa-angle-right"></i> &nbsp; Full width Image</a> </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                          <li class="mega-menu five-col"> <a href="carousel-sliders.html">Shortcodes</a> <span class="arrow"></span>
                            <ul>
                              <li> <a href="#">Shortcodes 1</a> <span class="arrow"></span>
                                <ul>
                                  <li><a href="shortcodes-accordions.html"><i class="fa fa-plus-circle"></i> &nbsp; Accordions</a> </li>
                                  <li><a href="shortcodes-alerts.html"><i class="fa fa-exclamation" aria-hidden="true"></i> &nbsp; Alerts</a> </li>
                                  <li><a href="shortcodes-animations.html"><i class="fa fa-bars"></i> &nbsp; Animations</a> </li>
                                  <li><a href="shortcodes-blockquotes.html"><i class="fa fa-quote-right" aria-hidden="true"></i> &nbsp; Blockquotes</a> </li>
                                  <li><a href="shortcodes-breadcrumbs.html"><i class="fa fa-share" aria-hidden="true"></i> &nbsp; Breadcrumbs</a> </li>
                                  <li><a href="shortcodes-buttons.html"><i class="fa fa-external-link" aria-hidden="true"></i> &nbsp; Buttons</a> </li>
                                  <li><a href="shortcodes-call-to-action.html"><i class="fa fa-level-up" aria-hidden="true"></i> &nbsp; Call to Action</a> </li>
                                  <li><a href="shortcodes-clients-logos.html"><i class="fa fa-user" aria-hidden="true"></i> &nbsp; Clients Logos</a> </li>
                                  <li><a href="shortcodes-carousel-sliders.html"><i class="fa fa-sort" aria-hidden="true"></i> &nbsp; Carousel Sliders</a> </li>
                                  <li><a href="shortcodes-counters.html"><i class="fa fa-text-height" aria-hidden="true"></i> &nbsp; Counters</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Shortcodes 2</a> <span class="arrow"></span>
                                <ul>
                                  <li><a href="shortcodes-content-boxes.html"><i class="fa fa-th" aria-hidden="true"></i> &nbsp; Content Boxes</a> </li>
                                  <li><a href="shortcodes-data-tables.html"><i class="fa fa-table" aria-hidden="true"></i> &nbsp; Data Tables</a> </li>
                                  <li><a href="shortcodes-date-pickers.html"><i class="fa fa-calendar" aria-hidden="true"></i> &nbsp; Date Pickers</a> </li>
                                  <li><a href="shortcodes-dropcaps.html"><i class="fa fa-font" aria-hidden="true"></i> &nbsp; Dropcap & Highlight</a> </li>
                                  <li><a href="shortcodes-dividers.html"><i class="fa fa-minus" aria-hidden="true"></i> &nbsp; Dividers</a> </li>
                                  <li><a href="shortcodes-file-uploads.html"><i class="fa fa-upload" aria-hidden="true"></i> &nbsp; File Uploads</a> </li>
                                  <li><a href="shortcodes-forms.html"><i class="fa fa-envelope" aria-hidden="true"></i> &nbsp; Forms</a> </li>
                                  <li><a href="shortcodes-grids.html"><i class="fa fa-th-list" aria-hidden="true"></i> &nbsp; Grids</a> </li>
                                  <li><a href="shortcodes-heading-styles.html"><i class="fa fa-text-height" aria-hidden="true"></i> &nbsp; Heading Styles</a> </li>
                                  <li><a href="shortcodes-hover-styles.html"><i class="fa fa-picture-o" aria-hidden="true"></i> &nbsp; Hover Styles</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Shortcodes 3</a> <span class="arrow"></span>
                                <ul>
                                  <li><a href="shortcodes-icon-boxes.html"><i class="fa fa-th-large" aria-hidden="true"></i> &nbsp; Icon Boxes</a> </li>
                                  <li><a href="shortcodes-icon-circles.html"><i class="fa fa-circle-o" aria-hidden="true"></i> &nbsp; Icon Circles</a> </li>
                                  <li><a href="shortcodes-countdown-timers.html"><i class="fa fa-bars" aria-hidden="true"></i> &nbsp; Countdown Timers</a> </li>
                                  <li><a href="shortcodes-icon-lists.html"><i class="fa fa-list" aria-hidden="true"></i> &nbsp; Icon Lists</a> </li>
                                  <li><a href="shortcodes-images.html"><i class="fa fa-picture-o" aria-hidden="true"></i> &nbsp; Images</a> </li>
                                  <li><a href="shortcodes-labels-and-badges.html"><i class="fa fa-adjust" aria-hidden="true"></i> &nbsp; Labels and Badges</a> </li>
                                  <li><a href="shortcodes-lightbox.html"><i class="fa fa-th" aria-hidden="true"></i> &nbsp; Lightbox</a> </li>
                                  <li><a href="shortcodes-lists.html"><i class="fa fa-list-ul" aria-hidden="true"></i> &nbsp; Lists</a> </li>
                                  <li><a href="shortcodes-maps.html"><i class="fa fa-map-marker" aria-hidden="true"></i> &nbsp; Maps</a> </li>
                                  <li><a href="shortcodes-modal-popup.html"><i class="fa fa-search-plus" aria-hidden="true"></i> &nbsp; Modal Popup</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Shortcode 4</a> <span class="arrow"></span>
                                <ul>
                                  <li><a href="shortcodes-pagenation.html"><i class="fa fa-exchange" aria-hidden="true"></i> &nbsp; Pagenation</a> </li>
                                  <li><a href="shortcodes-parallax-backgrounds.html"><i class="fa fa-align-center" aria-hidden="true"></i> &nbsp; Parallax Backgrounds</a> </li>
                                  <li><a href="shortcodes-pricing-tables.html"><i class="fa fa-table" aria-hidden="true"></i> &nbsp; Pricing Tables</a> </li>
                                  <li><a href="shortcodes-pie-charts.html"><i class="fa fa-pie-chart" aria-hidden="true"></i> &nbsp; Pie Charts</a> </li>
                                  <li><a href="shortcodes-pricing-badges.html"><i class="fa fa-external-link"></i> &nbsp; Pricing Badges</a> </li>
                                  <li><a href="shortcodes-progress-bars.html"><i class="fa fa-outdent" aria-hidden="true"></i> &nbsp; Progress Bars</a> </li>
                                  <li><a href="shortcodes-process-steps.html"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> &nbsp; Process Steps</a> </li>
                                  <li><a href="shortcodes-post-styles.html"><i class="fa fa-pencil" aria-hidden="true"></i> &nbsp; Post Styles</a> </li>
                                  <li><a href="shortcodes-toogle-switches.html"><i class="fa fa-toggle-on" aria-hidden="true"></i> &nbsp; Toogle Switches</a> </li>
                                  <li><a href="shortcodes-timeline.html"><i class="fa fa-align-left" aria-hidden="true"></i> &nbsp; Timeline</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Shortcode 5</a> <span class="arrow"></span>
                                <ul>
                                  <li><a href="shortcodes-star-ratings.html"><i class="fa fa-star-half-o" aria-hidden="true"></i> &nbsp; Star Ratings</a> </li>
                                  <li><a href="shortcodes-sections.html"><i class="fa fa-square-o" aria-hidden="true"></i> &nbsp; Sections</a> </li>
                                  <li><a href="shortcodes-social-icons.html"><i class="fa fa-twitter" aria-hidden="true"></i> &nbsp; Social Icons</a> </li>
                                  <li><a href="shortcodes-tabs.html"><i class="fa fa-th-large" aria-hidden="true"></i> &nbsp; Tabs</a> </li>
                                  <li><a href="shortcodes-team.html"><i class="fa fa-user" aria-hidden="true"></i> &nbsp; Team</a> </li>
                                  <li><a href="shortcodes-testimonials.html"><i class="fa fa-pencil-square"></i> &nbsp; Testimonials</a> </li>
                                  <li><a href="shortcodes-tooltips.html"><i class="fa fa-font" aria-hidden="true"></i> &nbsp; Tooltips</a> </li>
                                  <li><a href="shortcodes-toogles.html"><i class="fa fa-toggle-on" aria-hidden="true"></i> &nbsp; Toogles</a> </li>
                                  <li><a href="shortcodes-typography.html"><i class="fa fa-text-height" aria-hidden="true"></i> &nbsp; Typography</a> </li>
                                  <li><a href="shortcodes-videos.html"><i class="fa fa-play-circle" aria-hidden="true"></i> &nbsp; Videos</a> </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                          <li class="right"> <a href="#">Blog</a> <span class="arrow"></span>
                            <ul class="dm-align-2">
                              <li> <a href="#">Classic <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="blog-full-width.html">Full Width</a> </li>
                                  <li> <a href="blog-left-sidebar.html">Left Sidebar</a> </li>
                                  <li> <a href="blog-right-sidebar.html">Right Sidebar</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Grids <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="blog-1-columns.html">One Column</a> </li>
                                  <li> <a href="blog-2-columns.html">Two Column</a> </li>
                                  <li> <a href="blog-3-columns.html">Three Column</a> </li>
                                  <li> <a href="blog-4-columns.html">Four Column</a> </li>
                                  <li> <a href="blog-5-columns.html">Five Column</a> </li>
                                  <li> <a href="blog-6-columns.html">Six Column</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Default<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="blog-default-full-width.html">Full Width</a> </li>
                                  <li> <a href="blog-default-left-sidebar.html">Left Sidebar</a> </li>
                                  <li> <a href="blog-default-right-sidebar.html">Right Sidebar</a> </li>
                                  <li> <a href="blog-default-author.html">Author Page</a> </li>
                                  <li> <a href="blog-default-comments.html">Blog Comments</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Thumbnail<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="blog-full-width-thumbnail.html">Full Width</a> </li>
                                  <li> <a href="blog-left-sidebar-thumbnail.html">Left Sidebar</a> </li>
                                  <li> <a href="blog-right-sidebar-thumbnail.html">Right Sidebar</a> </li>
                                  <li> <a href="blog-author-thumbnail.html">Author Page</a> </li>
                                  <li> <a href="blog-comments-thumbnail.html">Blog Comments</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Single Post<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="blog-image-post.html">Image Post</a> </li>
                                  <li> <a href="blog-video-post.html">Video Post</a> </li>
                                  <li> <a href="blog-gallery-post.html">Gallery Post</a> </li>
                                  <li> <a href="blog-sidebar-post.html">Sidebar Post</a> </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                          <li class="right"> <a href="#">Shop</a> <span class="arrow"></span>
                            <ul>
                              <li> <a href="#">Default<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="shop-full-width.html">Full Width</a> </li>
                                  <li> <a href="shop-left-sidebar.html">Left Sidebar</a> </li>
                                  <li> <a href="shop-right-sidebar.html">Right Sidebar</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Grids <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="shop-2-columns.html">Two Column</a> </li>
                                  <li> <a href="shop-3-columns.html">Three Column</a> </li>
                                  <li> <a href="shop-4-columns.html">Four Column</a> </li>
                                  <li> <a href="shop-5-columns.html">Five Column</a> </li>
                                  <li> <a href="shop-6-columns.html">Six Column</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Single Product<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="shop-single-full-width.html">Full Width</a> </li>
                                  <li> <a href="shop-single-left-sidebar.html">Left Sidebar</a> </li>
                                  <li> <a href="shop-single-right-sidebar.html">Right Sidebar</a> </li>
                                  <li> <a href="shop-single-both-sidebar.html">both Sidebars</a> </li>
                                </ul>
                              </li>
                              <li> <a href="#">Order Process<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
                                <ul>
                                  <li> <a href="shop-cart.html">Shoping Cart</a> </li>
                                  <li> <a href="shop-checkout.html">Checkout</a> </li>
                                  <li> <a href="shop-wishlist.html">Wishlist</a> </li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>

kanlukasz commented 6 years ago

@klevinkona from what i know wp-bootstrap-navwalker supports only 2 depth because this is standard and official method from bootstrap framework

klevinkona commented 6 years ago

Thank you for your response @kanlukasz, any suggestion how to solve this?

brettalton commented 6 years ago

@klevinkona, here are some links on the subject,

https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/115 https://www.omnicoda.com/blog/wordpress-development/beginners-guide-wordpress-menus-bootstrap-navigation (see "Bootstrap Mega Menus for WordPress")

kanlukasz commented 6 years ago

@klevinkona, @brettalton. Today i found this theme - https://pl.wordpress.org/themes/wp-bootstrap-starter/ there is included bootstrap navwalker with that modification here is the demo -https://afterimagedesigns.com/wp-bootstrap-starter/components/ looks interesting!

klevinkona commented 6 years ago

Thank you @kanlukasz

pattonwebz commented 6 years ago

There's a mostly fully developed version of the walker that works for Bootstrap 4 in the v4 branch of the repo.

Closing this issue out as a v4 version is available that works with BS4.0.0 stable :)

teguhhidayanto commented 6 years ago

hy sir,, recently I learn wp development using bootstrap and I found this amazing plugin that u built,, and i try to implement this plugin by following your instructions, but i still get error notification, if u dont mind please help me to find which step that i may be wrong. here is the code ,, function.php = <?php // Register Custom Navigation Walker require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php'; register_nav_menus( array( 'primary' => __( 'Primary Menu', 'wpbootstrap' ), ) ); i did follow the second instruction when error is hapened, but i still get error message header.php = `

Subscribe

Sign up

` and i did place the nav walker php file just like the instruction said,, here is tehe error message = Fatal error : Uncaught Error: Class 'WP_Bootstrap_Navwalker' not found in C:\xampp\htdocs\wptutdev\wp-content\themes\wpbootstrap\header.php:52 Stack trace: #0 C:\xampp\htdocs\wptutdev\wp-includes\template.php(688): require_once() #1 C:\xampp\htdocs\wptutdev\wp-includes\template.php(647): load_template('C:\\xampp\\htdocs...', true) #2 C:\xampp\htdocs\wptutdev\wp-includes\general-template.php(41): locate_template(Array, true) #3 C:\xampp\htdocs\wptutdev\wp-content\themes\wpbootstrap\index.php(1): i do serach in all web pages but no solution can apply. i do need to finish this project sir, so your help will be great to me,, thank you. note = i use bootstrap blog example theme from bootstrap official web

ssmason commented 6 years ago

We have a primary navigation with submenus, When we click on a submenu item , the other submenu briefly displays before the link is executed. Can any one assist or explain why this is happening..?

wp-bootstrap / wp-bootstrap-navwalker

Support Navbar in Bootstrap 4 #238