Converting Offcanvas to Wordpress dynamic nav

responsivewebsg commented 9 years ago

Hi, I am trying to convert my working index.html , bootstrap and offcanvas css and js. It is working fine on html but when I convert into the header.php on Wordpress using wp_bootstrap_navwalker.php. The offcanvas slides but does not show when collapes but does before collapsing though. I do not have a demo site at the moment but before are the files. Thanks in advance for the time:)

Below are the codes I've used.

Index.html

Header.php

    <header>                
         <nav class="navbar navbar-default" role="navigation">
            <div class="container">          
                <div class="navbar-header">
                    <a class="navbar-brand wow fadeInLeft" href="<?php echo home_url(); ?>">
                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png" width="269" height="94" class="img-responsive">
                    </a>
                     <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
                        <span class="sr-only">Toggle navigation</span>
                            <span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                            </span>
                     </button>
                     <a class="phone-no" href="#">6280 5666 (24/7)</a>
                </div>

                <div class="navbar-offcanvas navbar-offcanvas-right" id="js-bootstrap-offcanvas">
                    <ul class="social-share">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#" id="careers"><i>Careers</i></a></li>
                        <a href="#" id="book">Book appt</a>
                    </ul>
                    <?php
                        wp_nav_menu( array(
                            'menu'              => 'primary',
                            'theme_location'    => 'primary',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse navbar-toggle offcanvas-toggle',
                            'container_id'      => 'js-bootstrap-offcanvas',
                            'menu_class'        => 'nav navbar-nav navbar-right navbar-offcanvas navbar-offcanvas-right',
                            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                            'walker'            => new wp_bootstrap_navwalker())
                        );
                    ?>                      
                </div>
            </div> <!-- end .container -->
        </nav> <!-- end .navbar -->     
    </header> <!-- end header -->

\ After adding the menu dynamically in WP, it shows for desktop site.

responsivewebsg commented 8 years ago

Hi Phil,

Managed to correct the issue with the following code.

            <?php
                wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'js-bootstrap-offcanvas',
                    'container_class'   => 'collapse navbar-collapse navbar-toggle offcanvas-toggle js-bootstrap-offcanvas',
                    'container_id'      => 'js-bootstrap-offcanvas',
                    'menu_class'        => 'nav navbar-nav navbar-right',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>

Thanks for the plugin anyways!

iamphill commented 8 years ago

@responsivewebsg Glad it is sorted! Sorry I didn't get round to looking into it!

responsivewebsg commented 8 years ago

Hi Phil,

No worries on that.

Thank you.

From: Phil Hughes [mailto:notifications@github.com] Sent: Monday, 7 December 2015 5:07 PM To: iamphill/Bootstrap-Offcanvas Bootstrap-Offcanvas@noreply.github.com Cc: responsivewebsg responsiveweb@Outlook.sg Subject: Re: [Bootstrap-Offcanvas] Converting Offcanvas to Wordpress dynamic nav (#29)

@responsivewebsg https://github.com/responsivewebsg Glad it is sorted! Sorry I didn't get round to looking into it!

— Reply to this email directly or view it on GitHub https://github.com/iamphill/Bootstrap-Offcanvas/issues/29#issuecomment-162454266 . https://github.com/notifications/beacon/APX93xAY0ssNdLw4rdmEGBQM0qm0tzPEks5pNUO8gaJpZM4Gvnpg.gif

iamphill / Bootstrap-Offcanvas

Converting Offcanvas to Wordpress dynamic nav #29