Creating a WordPress responsive dropdown menu using FlexNav

Creating a WordPress responsive dropdown menu using FlexNav, FlexNav is a multi-level responsive menu built using media queries and javascript. The best feature of FlexNav is, it supports Multiple Nested sub menus. It works on all devices. OnClick and hover support on desktops. FlexNav is downloadable at github, But the FlexNav demo is not working, I’ve fixed that issue you can download working copy from the link.

You can see a demo here.
Download Working FlexNav static html.

Steps involved in Creating a WordPress responsive dropdown menu using FlexNav

  1. First copy the css and js files to WordPress theme folder.
  2. Add these css and js files to head section in header.php file
  3. Modify the wp_nav_menu function according to needs of FlexNav.
  4. Then create the menu from Appearance => Menus.
  5. And assign that menu into primary location( in my case it’s primary location your’s maybe different) of theme
1

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.

2

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.

<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">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' );?>/js/jquery.flexnav.js" ></script>
<script type="text/javascript">
        jQuery(document).ready(function($){
	$(".flexnav").flexNav({
	});
});
    </script>
3

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.

<div class="menu-button one-page">Menu</div>
<?php
	wp_nav_menu( array( 
		'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
	));
?>
4

Create a menu from WordPress admin

Navigate to Appearance => Menus and add items with levels and sub levels.

5

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.

Download WordPress theme with FlexNav responsive menu

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.

Incoming search terms:

  • FlexNav wp theme
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe