Menu icon Foundation

My Posts

  • 2
    Replies
  • Centered col - text next to image

    By david

    centertextimage

    I just can't get this "simple" thing to work: i want a row with a about me section. An image next to a paragraph (both vertical centered). But i only want to use let's say about 6 columns total (horizontal centered). When viewing mobile: image on top ... (continued)

    Last Reply by david about 4 years ago


  • 3
    Replies
  • Fullwidth columns each in a row?

    By david

    Rowscolumns

    I was wondering, what is the correct way to build a block for example a news block: title header with items underneath (thumb, title, date, excerpt..) Should i create a row for each line (title, date..) or just 1 row with multiple 12 width large cols... o... (continued)

    Last Reply by Brandon Arnold over 4 years ago




My Comments

david commented on david's post about 4 years

"Generate code" not working in safari and chrome? (on a mac). Btw i now have one piece solved by this code:

  <div class="row">
      <div class="small-8 large-centered columns">
          <div class="row">
            <div class="small-4 columns text-right"> IMAGE</div>
            <div class="small-8 columns text-left"><P>text text text text text text text text</p></div>
          </div>
      </div>
    </div>

Now i only need to vertical center both cols..

david commented on david's post over 4 years

thnx for your thoughts! the only thing i can think of is that the use of cols/row may be more controllable in a responsive way..

david commented on david's post over 4 years

headerp.php:
```PHP

<?php wp_head(); ?>

>

<div id="page" class="hfeed site">
  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'blikvoer' ); ?></a>

  <header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
      <div class="row">
        <div class="small-12 columns">
          <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
          <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div><!-- Foundation .columns end -->
      </div><!-- Foundation .row end -->
    </div><!-- .site-branding -->


<nav class="tab-bar show-for-small-only">

  <section class="middle tab-bar-section">
    <h1 class="title"><?php bloginfo( 'name' ); ?></h1>
  </section>

  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>
</nav>

<aside class="right-off-canvas-menu" aria-hidden="true">
  <?php off_canvas(); ?>
</aside>



<!-- foundation topbar right -->
  <div class="sticky">
    <nav class="top-bar" data-topbar role="navigation" data-options="scrolltop: false" >
      <ul class="title-area">
        <li class="name">
          <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">hier een logo</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <?php topbar_right(); ?>
      </section>
  </nav><!-- .top-bar -->
</div> <!-- einde sticky -->
  <!-- foundation menu end -->

<!-- #masthead -->


functions.php:
```PHP  
/**
 * blikvoer functions and definitions
 *
 * @package blikvoer
 */
/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
  $content_width = 640; /* pixels */
}

if ( ! function_exists( 'blikvoer_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function blikvoer_setup() {

  /*
   * Make theme available for translation.
   * Translations can be filed in the /languages/ directory.
   * If you're building a theme based on blikvoer, use a find and replace
   * to change 'blikvoer' to the name of your theme in all the template files
   */
  load_theme_textdomain( 'blikvoer', get_template_directory() . '/languages' );

  // Add default posts and comments RSS feed links to head.
  add_theme_support( 'automatic-feed-links' );

  /*
   * Let WordPress manage the document title.
   * By adding theme support, we declare that this theme does not use a
   * hard-coded <title> tag in the document head, and expect WordPress to
   * provide it for us.
   */
  add_theme_support( 'title-tag' );

  /*
   * Enable support for Post Thumbnails on posts and pages.
   *
   * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
   */
  //add_theme_support( 'post-thumbnails' );

  // This theme uses wp_nav_menu() in one location.
  register_nav_menus( array(
    'primary' => __( 'Primary Menu'),
    'mobile-off-canvas' => 'Mobile',
  ) );



/**
* Left top bar
*/
  function topbar_right() {
      wp_nav_menu(array(
        'theme_location'  => 'primary',
        'container'        => false,                      // remove nav container
        'depth'            => 5,                          // limit the depth of the nav
        'items_wrap'       => '<ul id="%1$s" class="right %2$s">%3$s</ul>',
        'walker'          => new blikv_walker_nav_menu()
    ));
  }


/**
* Mobile off-canvas
*/
    function off_canvas() {
        wp_nav_menu(array(
        'theme_location'  => 'mobile-off-canvas',        // where it's located in the theme
        'container'       => false,                      // remove nav container
        'depth'            => 5,                          // limit the depth of the nav
        'container_class' => '',                        // class of container
        'menu'            => '',                        // menu name
        'menu_class'      => 'off-canvas-list',          // adding custom nav class
        'before'          => '',                        // before each link <a>
        'after'            => '',                        // after each link </a>
        'link_before'      => '',                        // before each link text
        'link_after'      => '',                        // after each link text
        'fallback_cb'      => false,                      // fallback function (see below)
        'walker'          => new blikv_Offcanvas_Walker()
        ));
    }


/**
* Walker foundation topbar nav
*/
  class blikv_walker_nav_menu extends Walker_Nav_Menu {

    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    $element->has_children = !empty( $children_elements[$element->ID] );
    $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
    $element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';

    parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }

  function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
    $item_html = '';
    parent::start_el( $item_html, $object, $depth, $args );

    $output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

    $classes = empty( $object->classes ) ? array() : (array) $object->classes;
    if ( in_array('label', $classes) ) {
      $output .= '<li class="divider"></li>';
      $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
    }

    if ( in_array('divider', $classes) ) {
      $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
    }

    $output .= $item_html;
  }

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "\n<ul class=\"sub-menu dropdown\">\n";
  }

}


/**
* Walker foundation offcanvas nav
*/
class blikv_Offcanvas_Walker extends Walker_Nav_Menu {

  function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {
    $element->has_children = ! empty( $children_elements[ $element->ID ] );
    $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
    $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? 'has-submenu' : '';

    parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }

  function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
    $item_html = '';
    parent::start_el( $item_html, $object, $depth, $args );

    $classes = empty( $object->classes ) ? array() : (array) $object->classes;

    if ( in_array( 'label', $classes ) ) {
      $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
    }

    $output .= $item_html;
  }

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "\n<ul class=\"left-submenu\">\n<li class=\"back\"><a href=\"#\">Back</a></li>\n";
  }

}



  /*
   * Switch default core markup for search form, comment form, and comments
   * to output valid HTML5.
   */
  add_theme_support( 'html5', array(
    'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
  ) );

  /*
   * Enable support for Post Formats.
   * See http://codex.wordpress.org/Post_Formats
   */
  add_theme_support( 'post-formats', array(
    'aside', 'image', 'video', 'quote', 'link',
  ) );

  // Set up the WordPress core custom background feature.
  /*
add_theme_support( 'custom-background', apply_filters( 'blikvoer_custom_background_args', array(
    'default-color' => 'ffffff',
    'default-image' => '',
  ) ) );
*/
}
endif; // blikvoer_setup
add_action( 'after_setup_theme', 'blikvoer_setup' );

/**
 * Register widget area.
 *
 * @link http://codex.wordpress.org/Function_Reference/register_sidebar
 */
function blikvoer_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'Sidebar', 'blikvoer' ),
    'id'            => 'sidebar-1',
    'description'   => '',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'blikvoer_widgets_init' );


/**
 * Enqueue scripts and styles.
 */
function blikvoer_scripts() {
  wp_enqueue_style( 'blikvoer-style', get_stylesheet_uri() );

  /* Add Foundation CSS */
  wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
  wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );

  /* Add Foundation JS */
  wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
  wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );

   /* Foundation Init JS */
    wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.js', array( 'jquery' ), '1', true );
    wp_enqueue_script( 'foundation-topbar-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.topbar.js', array( 'jquery' ), '1', true );
    wp_enqueue_script( 'foundation-offcavas-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.offcanvas.js', array( 'jquery' ), '1', true );

  /* Foundation Equalizer JS */
  wp_enqueue_script( 'foundation-equalizer-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.equalizer.js', array( 'jquery' ), '1', true );


//  wp_enqueue_style( 'blikvoer-style-content-sitebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );

  /* Google fonts & fontawesome */
  wp_enqueue_style( 'blikvoer-style-google-fonts', 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' );
  wp_enqueue_style( 'blikvoer-style-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

  wp_enqueue_script( 'blikvoer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

  wp_enqueue_script( 'blikvoer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
}
add_action( 'wp_enqueue_scripts', 'blikvoer_scripts' );



/**
 * Implement the Custom Header feature.
 */
// require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

david commented on david's post over 4 years

I used that code (i pasted it in the post i thought..), but then the navbar still jumps to the top (actually on top of the header instead of above).

Maybe it is a good way when menu is large for small screens, but then it would be nice if it scrolls (animate) to the top..

david commented on david's post over 4 years

Solved! the problem was in
functions.php:

wp_enqueue_script( 'foundation-topbar-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.topbar.js', array( 'jquery' ), '1', true );

and in footer.php:

jQuery(document).foundation();

david commented on david's post over 4 years

I also tried a clean theme (not underscores), same result.. the mobile menu does not open anything.. i just don't get it.. sorry a bit of a Wp noob ;)

david commented on david's post over 4 years

I tried to edit my post, but my header code =
```PHP

<?php
/**
* The header for our theme.
*
* Displays all of the section and everything up till
*
* @package blikvoer
*/
?><!DOCTYPE html>
>

">


">

<?php wp_head(); ?>

>

<?php _e( 'Skip to content', 'blikvoer' ); ?>

" rel="home"><?php bloginfo( 'name' ); ?>
<?php bloginfo( 'description' ); ?>
<!-- Foundation .columns end -->
<!-- Foundation .row end -->
<!-- .site-branding -->

<!-- foundation menu -->

  <ul class="title-area">
    <li class="name">
      <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">hier een logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <?php
      $options = array(
        'theme_location'  => 'primary',
        'container'        => false, // remove nav container
        'depth'            => 5, // limit the depth of the nav
        'items_wrap'       => '<ul id="%1$s" class="right %2$s">%3$s</ul>',
        'walker'          => new GC_walker_nav_menu()
      );
      wp_nav_menu($options);
    ?>
  </section>
</nav><!-- .top-bar -->
<!-- foundation menu end -->

<!-- #masthead -->

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on david's post about 4 years

"Generate code" not working in safari and chrome? (on a mac). Btw i now have one piece solved by this code:

  <div class="row">
      <div class="small-8 large-centered columns">
          <div class="row">
            <div class="small-4 columns text-right"> IMAGE</div>
            <div class="small-8 columns text-left"><P>text text text text text text text text</p></div>
          </div>
      </div>
    </div>

Now i only need to vertical center both cols..

You commented on david's post over 4 years

thnx for your thoughts! the only thing i can think of is that the use of cols/row may be more controllable in a responsive way..

You commented on david's post over 4 years

headerp.php:
```PHP

<?php wp_head(); ?>

>

<div id="page" class="hfeed site">
  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'blikvoer' ); ?></a>

  <header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
      <div class="row">
        <div class="small-12 columns">
          <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
          <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div><!-- Foundation .columns end -->
      </div><!-- Foundation .row end -->
    </div><!-- .site-branding -->


<nav class="tab-bar show-for-small-only">

  <section class="middle tab-bar-section">
    <h1 class="title"><?php bloginfo( 'name' ); ?></h1>
  </section>

  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>
</nav>

<aside class="right-off-canvas-menu" aria-hidden="true">
  <?php off_canvas(); ?>
</aside>



<!-- foundation topbar right -->
  <div class="sticky">
    <nav class="top-bar" data-topbar role="navigation" data-options="scrolltop: false" >
      <ul class="title-area">
        <li class="name">
          <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">hier een logo</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <?php topbar_right(); ?>
      </section>
  </nav><!-- .top-bar -->
</div> <!-- einde sticky -->
  <!-- foundation menu end -->

<!-- #masthead -->


functions.php:
```PHP  
/**
 * blikvoer functions and definitions
 *
 * @package blikvoer
 */
/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
  $content_width = 640; /* pixels */
}

if ( ! function_exists( 'blikvoer_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function blikvoer_setup() {

  /*
   * Make theme available for translation.
   * Translations can be filed in the /languages/ directory.
   * If you're building a theme based on blikvoer, use a find and replace
   * to change 'blikvoer' to the name of your theme in all the template files
   */
  load_theme_textdomain( 'blikvoer', get_template_directory() . '/languages' );

  // Add default posts and comments RSS feed links to head.
  add_theme_support( 'automatic-feed-links' );

  /*
   * Let WordPress manage the document title.
   * By adding theme support, we declare that this theme does not use a
   * hard-coded <title> tag in the document head, and expect WordPress to
   * provide it for us.
   */
  add_theme_support( 'title-tag' );

  /*
   * Enable support for Post Thumbnails on posts and pages.
   *
   * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
   */
  //add_theme_support( 'post-thumbnails' );

  // This theme uses wp_nav_menu() in one location.
  register_nav_menus( array(
    'primary' => __( 'Primary Menu'),
    'mobile-off-canvas' => 'Mobile',
  ) );



/**
* Left top bar
*/
  function topbar_right() {
      wp_nav_menu(array(
        'theme_location'  => 'primary',
        'container'        => false,                      // remove nav container
        'depth'            => 5,                          // limit the depth of the nav
        'items_wrap'       => '<ul id="%1$s" class="right %2$s">%3$s</ul>',
        'walker'          => new blikv_walker_nav_menu()
    ));
  }


/**
* Mobile off-canvas
*/
    function off_canvas() {
        wp_nav_menu(array(
        'theme_location'  => 'mobile-off-canvas',        // where it's located in the theme
        'container'       => false,                      // remove nav container
        'depth'            => 5,                          // limit the depth of the nav
        'container_class' => '',                        // class of container
        'menu'            => '',                        // menu name
        'menu_class'      => 'off-canvas-list',          // adding custom nav class
        'before'          => '',                        // before each link <a>
        'after'            => '',                        // after each link </a>
        'link_before'      => '',                        // before each link text
        'link_after'      => '',                        // after each link text
        'fallback_cb'      => false,                      // fallback function (see below)
        'walker'          => new blikv_Offcanvas_Walker()
        ));
    }


/**
* Walker foundation topbar nav
*/
  class blikv_walker_nav_menu extends Walker_Nav_Menu {

    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    $element->has_children = !empty( $children_elements[$element->ID] );
    $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
    $element->classes[] = ( $element->has_children ) ? 'has-dropdown not-click' : '';

    parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }

  function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
    $item_html = '';
    parent::start_el( $item_html, $object, $depth, $args );

    $output .= ( $depth == 0 ) ? '<li class="divider"></li>' : '';

    $classes = empty( $object->classes ) ? array() : (array) $object->classes;
    if ( in_array('label', $classes) ) {
      $output .= '<li class="divider"></li>';
      $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
    }

    if ( in_array('divider', $classes) ) {
      $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
    }

    $output .= $item_html;
  }

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "\n<ul class=\"sub-menu dropdown\">\n";
  }

}


/**
* Walker foundation offcanvas nav
*/
class blikv_Offcanvas_Walker extends Walker_Nav_Menu {

  function display_element( $element, &$children_elements, $max_depth, $depth = 0, $args, &$output ) {
    $element->has_children = ! empty( $children_elements[ $element->ID ] );
    $element->classes[] = ( $element->current || $element->current_item_ancestor ) ? 'active' : '';
    $element->classes[] = ( $element->has_children && 1 !== $max_depth ) ? 'has-submenu' : '';

    parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }

  function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {
    $item_html = '';
    parent::start_el( $item_html, $object, $depth, $args );

    $classes = empty( $object->classes ) ? array() : (array) $object->classes;

    if ( in_array( 'label', $classes ) ) {
      $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html );
    }

    $output .= $item_html;
  }

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "\n<ul class=\"left-submenu\">\n<li class=\"back\"><a href=\"#\">Back</a></li>\n";
  }

}



  /*
   * Switch default core markup for search form, comment form, and comments
   * to output valid HTML5.
   */
  add_theme_support( 'html5', array(
    'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
  ) );

  /*
   * Enable support for Post Formats.
   * See http://codex.wordpress.org/Post_Formats
   */
  add_theme_support( 'post-formats', array(
    'aside', 'image', 'video', 'quote', 'link',
  ) );

  // Set up the WordPress core custom background feature.
  /*
add_theme_support( 'custom-background', apply_filters( 'blikvoer_custom_background_args', array(
    'default-color' => 'ffffff',
    'default-image' => '',
  ) ) );
*/
}
endif; // blikvoer_setup
add_action( 'after_setup_theme', 'blikvoer_setup' );

/**
 * Register widget area.
 *
 * @link http://codex.wordpress.org/Function_Reference/register_sidebar
 */
function blikvoer_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'Sidebar', 'blikvoer' ),
    'id'            => 'sidebar-1',
    'description'   => '',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'blikvoer_widgets_init' );


/**
 * Enqueue scripts and styles.
 */
function blikvoer_scripts() {
  wp_enqueue_style( 'blikvoer-style', get_stylesheet_uri() );

  /* Add Foundation CSS */
  wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
  wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );

  /* Add Foundation JS */
  wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
  wp_enqueue_script( 'foundation-modernizr-js', get_template_directory_uri() . '/foundation/js/vendor/modernizr.js', array( 'jquery' ), '1', true );

   /* Foundation Init JS */
    wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.js', array( 'jquery' ), '1', true );
    wp_enqueue_script( 'foundation-topbar-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.topbar.js', array( 'jquery' ), '1', true );
    wp_enqueue_script( 'foundation-offcavas-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.offcanvas.js', array( 'jquery' ), '1', true );

  /* Foundation Equalizer JS */
  wp_enqueue_script( 'foundation-equalizer-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.equalizer.js', array( 'jquery' ), '1', true );


//  wp_enqueue_style( 'blikvoer-style-content-sitebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );

  /* Google fonts & fontawesome */
  wp_enqueue_style( 'blikvoer-style-google-fonts', 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' );
  wp_enqueue_style( 'blikvoer-style-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

  wp_enqueue_script( 'blikvoer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

  wp_enqueue_script( 'blikvoer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
}
add_action( 'wp_enqueue_scripts', 'blikvoer_scripts' );



/**
 * Implement the Custom Header feature.
 */
// require get_template_directory() . '/inc/custom-header.php';

/**
 * Custom template tags for this theme.
 */
require get_template_directory() . '/inc/template-tags.php';

/**
 * Custom functions that act independently of the theme templates.
 */
require get_template_directory() . '/inc/extras.php';

/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

/**
 * Load Jetpack compatibility file.
 */
require get_template_directory() . '/inc/jetpack.php';

You commented on david's post over 4 years

I used that code (i pasted it in the post i thought..), but then the navbar still jumps to the top (actually on top of the header instead of above).

Maybe it is a good way when menu is large for small screens, but then it would be nice if it scrolls (animate) to the top..

You commented on david's post over 4 years

Solved! the problem was in
functions.php:

wp_enqueue_script( 'foundation-topbar-js', get_template_directory_uri() . '/foundation/js/foundation/foundation.topbar.js', array( 'jquery' ), '1', true );

and in footer.php:

jQuery(document).foundation();

You commented on david's post over 4 years

I also tried a clean theme (not underscores), same result.. the mobile menu does not open anything.. i just don't get it.. sorry a bit of a Wp noob ;)

You commented on david's post over 4 years

I tried to edit my post, but my header code =
```PHP

<?php
/**
* The header for our theme.
*
* Displays all of the section and everything up till
*
* @package blikvoer
*/
?><!DOCTYPE html>
>

">


">

<?php wp_head(); ?>

>

<?php _e( 'Skip to content', 'blikvoer' ); ?>

" rel="home"><?php bloginfo( 'name' ); ?>
<?php bloginfo( 'description' ); ?>
<!-- Foundation .columns end -->
<!-- Foundation .row end -->
<!-- .site-branding -->

<!-- foundation menu -->

  <ul class="title-area">
    <li class="name">
      <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">hier een logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <?php
      $options = array(
        'theme_location'  => 'primary',
        'container'        => false, // remove nav container
        'depth'            => 5, // limit the depth of the nav
        'items_wrap'       => '<ul id="%1$s" class="right %2$s">%3$s</ul>',
        'walker'          => new GC_walker_nav_menu()
      );
      wp_nav_menu($options);
    ?>
  </section>
</nav><!-- .top-bar -->
<!-- foundation menu end -->

<!-- #masthead -->

Posts Followed

Following

  • No Content

Followers

  • No Content