Adding Bootstrap menu to WordPress theme

This tutorial goes over how to create and add the Bootstrap navbar or menu to WordPress. The first step is to add a custom Walker menu to create the Bootstrap menu for the WordPress theme. We will then go over how to add the custom menu to the header of our WordPress theme and some […]

You need to have an active subscription to view this content.

Register Here!
  • If you’re as interested in developing WordPress with Bootstrap as I am, this truly is a great way to watch a WordPress theme come together on your local machine or your live domain! Brad offers a calm and methodical explanation of what, where and why.

  • mirel imbrea

    hello , I’m getting this error:

    Strict Standards: Declaration of Bootstrap_Walker_Nav_Menu::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in C:MAMPhtdocswp-contentthemeshotel-gardenincbootstrap-walker.php on line 9

    • Please go back over the markup and code that was inserted into the theme for this tutorial. I am sure you just missed a step.

  • Fonai

    Hi , there is a problem with the responsive , because the hamburger icon , when clicked doesn’t show the menu

    • Do you have any console errors? Did you make sure to include jQuery? If you can’t figure out where you went wrong, lets move this discussion to the support forum to get sorted out.

      • Fonai

        ok i’ll do that … thansk s !

  • Anyone having issues with there menu not rendering correctly here is a working version to copy and paste and modify to your liking:

    • Looks like you are missing some code there above ‘primary’. Be sure you are getting all the code. It is better to write the code rather than copy & pasting if you really want to learn the development process.

      • Hi Brad its all there but Disque looks like its stripping it out. I just modified the code which you have to since I was running into some troubles. not too sure why Disque is not showing the code…

        • Damian, please remove the custom code you added to the markup to see if you are still having problems. If you are still having problems, please add it to the support forum. Any reported problems thus far from users have been due to missed code or typos.

          • I saw where I went wrong. I didnt copy the nav_walker class I just used the one from the repo which has the class named differently.

          • Glad you got this sorted out!

  • Code Ecstasy

    Very nice tutorial ๐Ÿ™‚ . I would like to know how to show the
    third/fourth level menu item. It seems whatever I have this tutorial
    showing only second level menu item. Also would like to know how to
    appear drop down menus without clicking first level menu item by just
    mouse hovering them. It seems now I need to click on the first level
    menu item to appear the second level menu item in the drop down. Can you
    please let me know or you have covered these things in the following

    • These tutorials are based off the Bootstrap navbar (, which supports one level of dropdowns. It also requires the user to click the main navigation link in order for the dropdown menu to appear. This is mostly due to the fact that Bootstrap is a mobile-first framework. Remember mobile devices don’t have a hover state. A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search to get the navbar to work on hover. Hope this helps!

      • Code Ecstasy

        Thanks for the info ๐Ÿ™‚ . I’ll follow your suggestion. After creating the theme if I need any help regarding this, I’ll ask you to the support forum ๐Ÿ™‚


  • Code Ecstasy

    Hi Brad,

    Great tutorial. I’ve finished all the tutorial and also I added some option to my theme with Redux. My base theme is ready except the MENU. Couple of days ago I asked you a question that this menu walker class does not support multilevel menu item, only support upto two level menu. You replied me as follows

    “A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search”

    I thought that I’ll complete the menu very last following your advice. But unfortunately I did not find any suitable bootstrap walker class which support multilevel menu item. As it is a tutorial based on wordpress thus it is very important to work multilevel menu. Can you please think a about it and give us some solution. You’ve covered a lots of other thing which is easy to find in the web but unfortunately I did not find any suitable bootstrap walker class which support multilevel menu item.

    Can you please help me about this


    • I replied with:
      “These tutorials are based off the Bootstrap navbar (…, which supports one level of dropdowns. It also requires the user to click the main navigation link in order for the dropdown menu to appear. This is mostly due to the fact that Bootstrap is a mobile-first framework. Remember mobile devices don’t have a hover state. A lot of people on the web want the same functionality you are looking for, so you can find customization with a simple Google search to get the navbar to work on hover.”

      As of now, I don’t have any plans to create a tutorial on a multi-level dropdown with the Bootstrap navbar. This is because Bootstrap doesn’t support multi-level (which as I explained above, they don’t work very well on mobile devices. Mobile support should be one of your top priorities considering how fast mobile traffic is growing and how much weight Google is putting towards mobile..

      You should also consider how the menu works as of now. The user has to click the main menu item for the drop down to appear (this is bc a mobile/tablet device doesn’t have a hover state). If you added another level, the user would have to click twice to just see the third level and then click again to go to the page. In my opinion that is a pretty poor user experience.

      I did a Google search and found this:
      I haven’t tested it, but it says it supports multi-level. This might be something you could use or hack to work.

      I also found this:
      You could edit the Walker class to support this markup. It will require some edits to the Walker class.

      Again, I would highly recommend staying away from the third level. Look at the top sites on the web, you rarely see a third level these days on a responsive website. The guys that developed Bootstrap are pretty smart people. There is a reason that a third level isn’t included for the navbar as of now.

      Maybe in the next version of Bootstrap they will figure out an elegant way to support multi-level navigation cross-device? Just thinking about large navigation menus on a mobile devices make me think it probably won’t happen.

      Another route that you might consider is to scrape the Bootstrap navbar and find a jquery script of a WordPress plugin that supports multi-level navigations.

      Hope this helps!

      • Code Ecstasy

        Hello Brad,

        Nice to hear from you ๐Ÿ™‚ . I understand what you are saying and agree with most of your thoughts.

        But I’m not agree with your opinion

        “Again, I would highly recommend staying away from the third level” .

        I don’t want to appear the third level after clicking the second level. It can be okay if third level menu is appear as a child of the second level when the second level is appear fater hovering/clicking on first level

        I have some joomla item in ThemeForest and currently switching to wordpress. So it is a ThemeForest requirement to show the multilevel properly.

        Anyway, I’ll follow your two other link where multilevel is discussed. I would highly appreciate if you cover the option for show the multilevel menu item as a child of their respective parent level as soon as you can. No need to click on them just appear them all when clicking on the first level. This way user do not need to click on any level and also multilevel showing problem will solve. I hope you understand what I mean. And thanks again for your fast reply


  • Mascha

    The menu works, but every time I add or change a post or page, I keep getting a warning that is like this.
    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/newtheme/inc/bootstrap-walker.php:1) in /public_html/test/wp-admin/post.php on line 235

    It always refers to line 1 of the bootstrap-walker.php. I already checked if I could find any unneccesary spaces in the code, but as far as I know, this is not the case.

    • This could be whitespace at the end of any of the PHP files. Did you manually edit the wp-config.php file as well?

      Send me your latest theme files and I will see if they work on my end.

  • RenaR

    I’m not sure what the problem is but the menu isn’t working for me. You can see what I’ve done so far here: Thanks!

    • You have a few console errors. Doesn’t look like you have the bootstrap.min.js file in your /js/ directory.. Fix the errors in your console. While in Chrome right click the page and select inspect element, then go to the console tab. If that doesn’t fix your issue, please create a post in the forum.

      • RenaR

        Hi Brad, Thanks for answering so quickly. I recreated the new theme twice, and I guess I forgot a step the second time around. Now the menu is showing, but it doesn’t look like the bar at the top that you have going for you. There still is an error in the console, but it’s for a missing image. It looks like it’s acting like the mobile menu. Do you have any other ideas what might be going on? Thanks!

  • K A

    Just after adding the bootstrap walker to the functions file, I get a lot of numbers in the top of my page just before the ‘Skip to content’

    What did I do wrong?

    • Moving forward can you please take your support questions to the members forum. Can you create a new topic with your header code. I have never seen this or had anyone else report this? Make sure you followed the video and written tutorials correctly.

  • Clay Stockford

    I have the exact same problem as KA with the numbers across the top of my screen, it shows up front end and back end. Despite it being bad practice since I was having such a hard time I didn’t write a single line of code it’s all copied and pasted from the tutorial.

    • Look at the file, you copied all of the line numbers when copy and pasting the custom walker menu class. They need to be removed from the file.

      • Clay Stockford

        Haha what a dumbass move on my part. Thanks so much for the quick reply. Love your site. Look forward to continuing the lessons.

  • Matt Rodriguez

    Do you know if this BS Walker menu is GPL?

  • Lloyd Johnson

    The walker is not working right, the menu does not work right here but it works anywhere else thats not going to make it active, any idea????

    • Looks to be working to me..? If you have further support questions, please ask them in the forum. Thanks

      • Lloyd Johnson


  • Tony Ross

    Awesome tutorials. Thanks for taking the time to create them.

    Just one thing would make this more seamless, and that’s if there was a link to the next tutorial on each tutorial page. That would save going back and forth to the main page all the time (unless I’m being thick – quite possible – and can’t see such a link if it already exists!).

    • Glad you are enjoying the tutorials!

      I agree, there should be navigation to the previous and next tutorials. I had to add tutorials to answer FAQs and update things. Because of this things got out of order.. I need to circle back around on this and get it sorted out.

  • kulkarni

    Hi Brad

    Wp codex has the following:

    Class Reference/Walker Nav Menu

    Source File

    Walker_Nav_Menu is located in /wp-includes/nav-menu-template.php

    So what is the difference between the one above and the way the tutorial shows it.

    • Checkout line 9 of the code above. This tutorial shows how to extend the WordPress Walker class. Extending the default WordPress Walker class adds the features we need to work with the Bootstrap framework.

      • kulkarni

        Thanks Brad

  • tom derrig

    hi brad got issues with the header navigation is showing vertical and i got this click button beside test showing too

    • I replied to your question in the support forum. Doesn’t look like you have added the Bootstrap CSS/JS to your theme correctly.

      • tom derrig

        cheers brad, I’m getting there !!!:)

  • Mark

    Would love it if you could expand on this tutorial adding a variety of menu types.

  • Mark

    Does your mobile nav work with this because I am copying the code and pasting it in and not getting the mobile nav to work??

    • This was solved in the support forum. Mark didn’t enqueue the Bootstrap JS file correctly..

  • David Gรณmez

    Hey Brad! Thanks for the tutorials, they really are very interesting.

    I’m having a strange problem. I managed to successfully add the Bootstrap menu following your instructions, and include top-level elements as well as add some “child elements” one of the “parent elements”, which are automatically placed in a dropdown menu.

    The problem appeared when I added a couple of “grand-child elements” to one of these “child elements” to be located in another dropdown sub-menu . Apparently the walker properly creates the dropdown submenu, but when
    you click on the “child element” for the submenu with the “grand-child elements” unfold, absolutely nothing happens.

    The source code I’m using is exactly the one included in the tutorial, did not customizations of any kind, either in the “header.php”, or the “bootstrap-walker.php”. I am using the most recent versions of Bootstrap and underscores.

    Could you help me with this?


  • Ronnie de Wit

    Hi Brad. Thanks for this great tutorial series!

    I have a problem and it looks like this:

    Fatal error: Class ‘Bootstrap_Walker_Nav_Menu’ not found in C:xampphtdocswordpresswp-contentthemeswpbootheader.php on line 48

    Any idea what I did wrong?

    • Did you rename any from the example code above? Did you do Step 5? If you still have issues please use the support forum.

  • DavidJ36
  • Violet Asmus

    Hi Brad,
    i just wanted to mention the following. As to doing the footer menu, realised that the menu was not showing because the theme location was named primary. In the functions.php you see that it is called menu-1. In my case anyways. In my function.php it looks like this:

    register_nav_menus( array(
    ‘menu-1’ => esc_html__( ‘Primary’, ‘bootstrapwp’ ),
    ) );

    i then decided to go back into the header.php and replaced the ‘primary’ with ‘menu-1’ to look like this:

    $args = array(
    ‘theme_location’ => ‘menu-1’,
    ‘depth’ => 2,
    ‘container’ => false,
    ‘menu_class’ => ‘nav navbar-nav navbar-right’,
    ‘walker’ => new Bootstrap_Walker_Nav_Menu()

    if (has_nav_menu(‘menu-1’)) {

    It now works! Just letting you know incase more questions about the matter pops up

    • Kevin

      This solution worked for me. Thanks Violet!

    • Dzoni

      Thank you Violet! My only concern is if this is a good practice?

      • Its perfectly fine. She just named everything ‘menu-1’ instead of ‘primary’

        • Dzoni

          Thanks for clearing that out. Btw, Brad, you did a great job here, thank you very much for this tutorials ๐Ÿ™‚

          • Thanks for the kind words. Glad you are enjoying them!

    • Rhyan Vargas

      .violet {
      coolness-factor: Awesome !important;

  • ajay bhatia

    Hi Brad,
    i have followed all the steps to create menu but i don’t know where is problem, menu is not showing.

  • Stanley LaFond

    You need to put a little vitality in your voice! You sound like you need to take a nap. It’s especially bad when you talk while you are typing, then it sounds like you are mumbling to yourself. This makes the videos difficult to follow. Can’t see the text on the videos unless I go full screen which makes it difficult to switch back to my text editor.
    I copied your header file and created a menu on the back end, located it in primary, but it does not show up in WordPress. I can only see the theme title. I would like to troubleshoot by checking your functions.php file, but you don’t include it in the tutorial–only small snippets.

    • Thanks for the feedback. Since this tutorial was recorded, I have purchased different recording equipment and have tried not to be so monotone… I have also started to zoom into the markup when writing code so it is easier to see. Have you read over Violet’s comment above? This may solve your issue. If not, please create a topic in the support forum and we will get your menu working.

  • David Pรฉrez

    Hi Brad,
    What happen if i’m using the last version of Bootstrap (v4.0.0-beta.2)? are these the same codes to add the Bootstrap navbar and menu to WordPress?

  • Ava Ryerson

    I’m working through this Walker Nav Menu and I’m super stuck. I cannot seem to get passed this step, I’ve gone through over and over and can’t figure out where I’m going wrong. The menu has no dropdown and I’ve followed all the steps to a T. Maybe it’s because I’m using another .xml file I exported from squarespace. I just wanted to start with some different content. Is this the issue you think? I would not know how to trouble shoot this really, not that advanced yet

    Please help!

    • The XML file shouldn’t matter. Do you have a menu created and set to the Primary location? Appearance -> Menus. Create a menu, add items to the menu, make sure it is set to the primary location. If this doesn’t fix your issue, please create a topic in the support forum.