Create responsive menu in wordpress using bootstrap

Monday, January 11th, 2016 (0 Comment)

You want your website to have a horizontal menu on the header and this menu can be customized in wordpress admin as create menus, remove menus, arrange menu structure and may be create category, page for menu or submenu.

In this section I will guide you to create dynamic menus, it can automatically scale according to the desktop, mobile or tablet (this technique is called responsive menu) and can customize your purpose.

Note: I use the library bootstrap css (add files as bootstrap.min.css and navbar.custom.css) and create menu function has a maximum of 2 level menu. If you want more, you can research multiple levels and adjust this function according to your wishes.

1. Create private responsive menu function

You need to know about Walker_Nav_Menu class in WordPress which is used to set the display of the menu structure. If we create a other class to inherit this class, we can establish the structure of the menu for our purpose. We create the following function in functions.php file

  • In this class, the start_lvl function use opening tag <ul> so the end_lvl function must to use closing tag </ ul>. The start_el function unused opening tag so the end_el function is empty

2. Register responsive function

You need to register in the main menu of wordpress theme locations. Add the following function in functions.php file

3. Create responsive menu

Using responsive bootstrap navbar menu to create dynamic menu in the header. Add the following code in the header.php file

  • line 18-34: code show menu dynamic.

After creating the menu is complete, we will have a problem with 2-level menu, when you click menu parent, it would not drop down menu child (submenus). To fixed the error, you need to add code following:

Additional: change color for responsive menu

If you need to edit the background color, text color, border color, dropdown color, border toggle, link color, etc … of bootstrap navbar default, you need to use color correction tool of bootstrap navbar to modify color, after finished adjusting, you copy code css in the following box and pase into style.css file of the theme. It will succeed.

Tags: , , ,

Related Posts

wordpress
Why should use WordPress Framework
wordpress
Create breadcrumbs function without plugin
wordpress
Related Posts functions in WordPress without using the plugin
wordpress
Set and show most viewed post on WordPress

Related Posts

wordpress
Why should use WordPress Framework
wordpress
Create breadcrumbs function without plugin
wordpress
Related Posts functions in WordPress without using the plugin
wordpress
Set and show most viewed post on WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *