I have created a child theme. The parent theme uses Foundation-Framework. I also have included foundation framework to my child theme and trying to add a simple navbar with dropdown but the dropdown is not seems to be a dropdown. Here is my functions.php

add_action( 'wp_enqueue_scripts', '_my_child_theme_styles', PHP_INT_MAX );
 * Enqueue parent theme styles considering styles dependencies.
function _my_child_theme_styles() {
    // Parent styles that need to be loaded before the child theme styles.
    $parent_styles = array(  'parent_style_1' => 'style.css', 'parent_style_2' => 'styles/modern.css' );
    // Enqueue parent styles using the custom handles and considering styles dependencies.
    foreach( $parent_styles as $handle => $style ) {
        wp_enqueue_style( $handle, get_template_directory_uri() . '/' . $style, array( 'hrb-normalize', 'hrb-foundation' ) );

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array_keys( $parent_styles )


function getthejobdone_styles() {
    wp_enqueue_style( 'OpenSans', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' ); //font-family: 'Open Sans', sans-serif;
    wp_enqueue_style( 'font-awesome', get_theme_file_uri('/css/vendor/font-awesome.min.css') );
    wp_enqueue_style( 'foundationCss', get_theme_file_uri('/css/vendor/foundation.css') );
add_action( 'wp_enqueue_scripts', 'getthejobdone_styles' );

//      OTHER JAVASCRIPTS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
function getthejobdone_js() {
    wp_enqueue_script( 'waypoints', get_theme_file_uri('/js/jquery.waypoints.min.js'), array('jquery'), '', true );
    wp_enqueue_script( 'what-input-JS', get_theme_file_uri('/js/vendor/what-input.js'), NULL, NULL, true );
    wp_enqueue_script( 'foundationJS', get_theme_file_uri('/js/vendor/foundation.js'), array('jquery'), '6.4.2', true );
    wp_enqueue_script( 'AppJS', get_theme_file_uri('/js/app.js'), array('jquery'), NULL, true );
add_action( 'wp_enqueue_scripts', 'getthejobdone_js' );

//      FEATURES
function getthejobdone_features() {
    add_theme_support('title-tag'); // dynamic title for every pages
add_action( 'after_setup_theme', 'getthejobdone_features' );

If I cut foundation.js and paste it just before the $parent_styles then the dropdown works but there shows a lot of errors in the console. So where I am doing wrong and how to fix it?

  • If your parent theme already has foundation then why are you adding it again? Any scripts and styles your parent theme loads will be on the child theme as well. – ngearing Apr 14 '18 at 20:30
  • Thank you for figuring it out but without adding foundation to my child theme it's not working anymore, probably I m missing something in child theme. – shihab Apr 14 '18 at 20:34
  • Why doesn't it work? What sort of errors are you getting? Does foundation require a special class name or html structure to work correctly? – ngearing Apr 14 '18 at 20:51
  • Yes, foundation is very similar to bootstrap and I used it's classes properly from their docs but it's just not working, obviously I m doing something wrong which still I can't figure it out. Bellow is the demo navbar taken from their docs – shihab Apr 14 '18 at 20:58
  • <ul class="menu dropdown" data-dropdown-menu> <li><a href="#">One</a></li> <li> <a href="#">Two</a> <ul class="menu"> <li><a href="#">dd-1</a></li> <li><a href="#">dd-2</a></li> <li><a href="#">dd-3</a></li> </ul> </li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> – shihab Apr 14 '18 at 21:00

So, after a chat discussion with the OP, I found out that the theme being used was HireBee. After some investigation it appears that HireBee only uses a very minimal version of the Foundation framework, which didn't include the Menu and Dropdown Menu components.

The answer in this case would be to dequeue the parent themes version of the Foundation framework CSS:

// Disable the HireBee Foundation framework.
wp_dequeue_style( 'hrb-foundation-css' );

and then download a custom version of the Foundation framework from https://foundation.zurb.com/sites/download.html/ including the required components - in this case the Navigation components 'Menu' and 'Dropdown Menu'

The customised version of the Foundation framework will then need to be enqueued from the Child themes functions.php file.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.