Make a WordPress theme with Bootstrap 3 – Tutorial #6

Video is ready, Click Here to View ×


I had a cold when I recorded this, excuse the bad voice. In the sixth instalment of this series, we will be building the navigation bar so that it is fully customisable from within the WordPress admin panel. This is essential, especially when selling or creating your theme for clients, as it means that they won’t have to go digging through the code to change links.

bootstrap-navwalker: https://github.com/twittem/wp-bootstrap-navwalker

Website: http://coders-guide.com
Twitter: http://twitter.com/coders_guide
Facebook: http://goo.gl/DmWtB
Google+: http://goo.gl/cGyk8
Donate: http://goo.gl/q3MPw

33 Comments

  1. Thanks!
    But how to do @class="dropdown-submenu"@ with Bootstrap 3 in your code?

    I need it:

    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> каталог <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li class="dropdown-submenu">
    <a href="#">Верхняя одежда</a>
    <ul class="dropdown-menu">
    <li class="dropdown-submenu">
    <a href="#"> Детская</a>
    <ul class="dropdown-menu">
    <li><a href="#"> Куртки </a></li>

  2. Thank you for a great video By you 🙂 
    I got a silly problem on navigation bar. When i collapsed my website on laptop/pc browser , the navigation bar has been already open in collapse mode. After clicked on toggle icon box, it will close. I don't know why this happen. Please help me.

  3. Excellent tutorial. Please explain how can we use custom permalinks. I can activate them through wordpress dashboard but bootstrap only accept default links like this /?p=25

  4. For anyone who is having problems getting it to work on mobile phones – you have got it uploaded onto a web server haven't you? Not just your PC /Mac

  5. Navwalker works perfectly… on the desktop, But on mobile touch devices (i.e. phones) when you select a dropdown and attempt to touch a link in that dropdown, the dropdown menu collapses? Thoughts?

  6. sublime text and other decent text editors support multi-line tab indenting – just select all the lines you want to change and tab away – a bit faster than what you had to do at 5:00.  Pretty sure st3 did not need a plugin for this functionality.

  7. I've redone this tutorial several times, but every time I see my menu for a few second after a refresh. And then it immediately disappears! It's the strangest thing. 

  8. Nice tutorial. Is there a way to make the menu aligned to the center of the screen? On my html it's aligned but it's not aligning to the center after i've inserted the navwalker menu code.

    My html center code:
    /* NAVBAR CENTER */
    .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; }
    .navbar .navbar-collapse { text-align: center; }

    But it's not working with the navwalker menu.

Leave a Reply

Your email address will not be published.


*