WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

Converting Bootstrap navbar to WordPress menu

To do this you will need to include WP Bootstrap Navwalker in your functions.php which can be downloaded here, simple add:-

in your functions.php.

Now you will want to edit your header.php file so your menu looks something like:-


    <div id="nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><img decoding="async" class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
        </div>


        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
      </div><!-- /.container-fluid -->
    </nav>
</div><!-- #nav -->

As long as you have included your bootstrap (CSS/JS) files in your or through your functions.php file, you now have a working bootstrap nav menu in your WordPress Theme.

You can include the Bootstrap core CSS & JS files from CDNJS:-

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion

Related Posts

Related - Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

CSS / 23rd June 2021

Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

Read More Related - How to Change Breakpoints with Bootstrap

CSS / 3rd October 2020

How to Change Breakpoints with Bootstrap

Read More