Creating a WordPress responsive dropdown menu using FlexNav
Steps involved in Creating a WordPress responsive dropdown menu using FlexNav
- First copy the css and js files to WordPress theme folder.
- Add these css and js files to head section in header.php file
- Modify the wp_nav_menu function according to needs of FlexNav.
- Then create the menu from Appearance => Menus.
- And assign that menu into primary location( in my case it’s primary location your’s maybe different) of theme
Copy css and js files to WordPress theme directory
Download working FlexNav from above link, and extract all the files. From extracted files copy js and css directories to WordPress theme folder.
Link CSS and JS files in head section of WordPress template file
Add CSS and JS files to head section in WordPress template file header.php. Just add this code before closing head tag.
[php] <link rel="stylesheet" type="text/css" href="<?php bloginfo(‘template_url’);?>/css/flexnav.css">
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘template_url’);?>/css/page.css">
Modify wp_nav_menu function according to FlexNav
Here just selecting the menu from primary location, And adding flexnav class to ul. adding data-breakpoint inside ul.
[php] <div class="menu-button one-page">Menu</div>
‘theme_location’ => ‘primary’,
‘container’ => ‘nav’,
‘container_class’ => ”,
‘menu_class’ => ‘flexnav’, //Adding the class for FlexNav
‘items_wrap’ => ‘<ul data-breakpoint="800" id="%1$s" class="%2$s">%3$s</ul>’, // Adding data-breakpoint for FlexNav
Create a menu from WordPress admin
Navigate to Appearance => Menus and add items with levels and sub levels.
Assign that menu to primary location
Change the location of that menu to primary location. After completing all the above steps, your menu should if it’s not working. I’ve provided a link for theme which just has WordPress menu. You can inspect the code why it’s not working in your case.
I hope this article helped you in Creating a WordPress responsive dropdown menu using FlexNav. To get latest news and updates follow us on twitter & facebook, subscribe to newsletter. If you have any feedback please let us know by using comment form.