Menu icon Foundation

My Posts





My Comments

Penny commented on Penny's post about 4 years

It is a wordpress site that is still on my local server. I wondered if it might be a clash with the wordpress burger icon? It has happened to me before with completely different templates.

There is a walker class, below.
```PHP

// Borrowed from FoundationPress
class Top_Bar_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-dropdown' : '';
    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 .= ( 0 == $depth ) ? '<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";
  }
}

Then this is the code in the header:

<div class="sticky">
  <nav class="top-bar full-width" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1> <a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></h1><img class="logo-home" src="http://subsite08.dev/wp-content/uploads/sites/9/2015/09/TTRC-flag-grey.gif">

      </li>
      <li class="toggle-topbar menu-icon">
        <a href="#"><span></span></a>
      </li>
    </ul>    
    <section class="top-bar-section">
      <?php joints_top_nav(); ?>
    </section>
  </nav>
</div>

```PHP  

The php for joints_top_nav:

// The Top Menu
function joints_top_nav() {
wp_nav_menu(array(
'container' => false, // Remove nav container
'container_class' => '', // Class of container
'menu' => 'The Top Menu', 'jointstheme', // Menu name
'menu_class' => 'top-bar-menu right', // Adding custom nav class
'theme_location' => 'main-nav', // Where it's located in the theme
'before' => '', // Before each link
'after' => '', // After each link
'link_before' => '', // Before each link text
'link_after' => '', // After each link text
'depth' => 5, // Limit the depth of the nav
'fallback_cb' => false, // Fallback function (see below)
'walker' => new Top_Bar_Walker(),
));
} /* End Top Menu */

I hope that makes sense!

All help much appreciated - I can't even target the white burger icon in Inspect Element.

Penny

Penny commented on Penny's post over 4 years

I think the problem lies with using the Foundation Topbar in Wordpress. To accommodate this, I used a Walker Class, which I got from someone else - not up to that level myself! It seems this is causing the conflict because, even when I deleted all my css for the topbar, and only used Foundation, the same issue arose.

Don't know if you can help with this? In the meantime, I am looking at other ways of integrating Foundation and Wordpress.

Penny commented on Penny's post over 4 years

UPDATE

I tried removing all of my custom css for anything relating to the top bar and/or navigation, and it still doesn't work.

Penny commented on Penny's post over 4 years

UPDATE

The dropdown menu for sub-pages now doesn't work on my ipad - it works fine on a reduced size screen on my computer, but on the ipad, it just shows the top item in the list.

My website is http://greengingerdesign.biz/ - I have done lots of customisation for the topbar, so hope I haven't broken it somehow.

Penny commented on Penny's post over 4 years

Yes - because I have quite a few sub items in my navigation, when this is on the mobile version, they are all visible, and I cannot get to any that aren't on the screen.

Penny commented on Penny's post over 4 years

I am using a local host, but here is the full html code for the index page, before I've sliced it up for wordpress.

Do I have to specify foundation.topbar.js anywhere?

```<!doctype html>

<script src="http://use.typekit.net/vkz6wly.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Green Ginger | Website Design and Coding</title>

<meta name="description" content="For a new responsive website or re-design of an existing website, get in touch - E:[email protected] T: 07968 196454. London and Gloucestershire">

  <link href="css/normalize.css" rel="stylesheet" media="screen">
  <link href="css/foundation.css" rel="stylesheet" media="screen">
    <link href="css/foundation-icons.css" rel="stylesheet" media="screen">
  <link href="css/app.css" rel="stylesheet" media="screen">
<!-- Top Bar -->
    <div>
    <h1>
           <img class="image-still" src="http://placehold.it/350x50">
          </h1>
  </div>


 <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>

</section>
<!-- MAIN TEXT -->

<section class="home">

  <div class="row">

    <div class="large-8 large-offset-2 columns">
      <h3><strong>I</strong> care about design.</h3>  
      <h3>I take care to make your website the right <strong>design</strong> for you, whether it is a template or designed from scratch.</h3> 
      <h3>I take care to make your content <strong>clear</strong> and accessible. </h3>
      <h3>I love beautiful design, and take care to make your website <strong>beautiful</strong> too.</h3>
      <h3>I design responsive <strong>websites</strong> - so your website will work, wherever it is seen.</h3>
    </div>

  </div>

  <div class="row">

    <div class="large-4 large-offset-4 columns hide-for-small"> 
      <blockquote>"I'm delighted with my new website! It completely fits with the brief - clear, attractive, accessible information, and easy to navigate." - <em>Louise Davies, Bowen therapist</em>
      </blockquote>
    </div>

  </div>

</section>

  <!-- LINKS -->

<section class="links hide-for-small">

  <div class="row">

    <div class="6 columns">
      <p>
        <a class="btn-dl rnd" href="#"><i class="fi-social-apple"></i>about</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>portfolio</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>options</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>contact</a>
       </p>
    </div>

  </div>

</section>

<footer>
    <p>&copy 2015 green ginger</p>
</footer>


<script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>

Penny commented on Penny's post over 4 years

Thank you for your replies. I still have had no success, however.

There are no errors in the console, and the source code shows jquery, foundation.js and my own file (theme.js) loading.

My theme.js file contains the following:

```jQuery(document).ready(function($) {

$(document).foundation();

$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);

return false

});

});

My functions.php contains the following:

// Load Foundation JS

function foundation_scripts() {

  // Load jQuery 2.0 

  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, null);

  wp_enqueue_script( 'jquery');

  // load Foundation JS

  wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.js', array( 'jquery' ), false, true );

  // load extra Theme JS file, which gets called AFTER Foundation js has been called

  wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'foundation_js' ), false, true );


}

add_action( 'wp_enqueue_scripts', 'foundation_scripts' );




My header.php now includes the full code you gave me, Rafi (which I can see works perfectly in the browser):

<div class="banner-quote row hide-for-small">

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <blockquote><?php the_content(); ?></blockquote>
  <?php endwhile; endif; ?>

</div>

<section class="row full-width navigation-area">

    <div>
    <h1>
           <img class="image-still" src="http://placehold.it/350x50">
          </h1>
  </div>


 <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>

</section>

But I still don't get the dropdown to work. I have gone through the code so many times, and I cannot see what I am doing wrong.

It is so frustrating as a beginner! I would really appreciate help with this. I have been following Treehouse videos to explain how to set up the files etc.

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Penny's post about 4 years

It is a wordpress site that is still on my local server. I wondered if it might be a clash with the wordpress burger icon? It has happened to me before with completely different templates.

There is a walker class, below.
```PHP

// Borrowed from FoundationPress
class Top_Bar_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-dropdown' : '';
    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 .= ( 0 == $depth ) ? '<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";
  }
}

Then this is the code in the header:

<div class="sticky">
  <nav class="top-bar full-width" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1> <a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></h1><img class="logo-home" src="http://subsite08.dev/wp-content/uploads/sites/9/2015/09/TTRC-flag-grey.gif">

      </li>
      <li class="toggle-topbar menu-icon">
        <a href="#"><span></span></a>
      </li>
    </ul>    
    <section class="top-bar-section">
      <?php joints_top_nav(); ?>
    </section>
  </nav>
</div>

```PHP  

The php for joints_top_nav:

// The Top Menu
function joints_top_nav() {
wp_nav_menu(array(
'container' => false, // Remove nav container
'container_class' => '', // Class of container
'menu' => 'The Top Menu', 'jointstheme', // Menu name
'menu_class' => 'top-bar-menu right', // Adding custom nav class
'theme_location' => 'main-nav', // Where it's located in the theme
'before' => '', // Before each link
'after' => '', // After each link
'link_before' => '', // Before each link text
'link_after' => '', // After each link text
'depth' => 5, // Limit the depth of the nav
'fallback_cb' => false, // Fallback function (see below)
'walker' => new Top_Bar_Walker(),
));
} /* End Top Menu */

I hope that makes sense!

All help much appreciated - I can't even target the white burger icon in Inspect Element.

Penny

You commented on Penny's post over 4 years

I think the problem lies with using the Foundation Topbar in Wordpress. To accommodate this, I used a Walker Class, which I got from someone else - not up to that level myself! It seems this is causing the conflict because, even when I deleted all my css for the topbar, and only used Foundation, the same issue arose.

Don't know if you can help with this? In the meantime, I am looking at other ways of integrating Foundation and Wordpress.

You commented on Penny's post over 4 years

UPDATE

I tried removing all of my custom css for anything relating to the top bar and/or navigation, and it still doesn't work.

You commented on Penny's post over 4 years

UPDATE

The dropdown menu for sub-pages now doesn't work on my ipad - it works fine on a reduced size screen on my computer, but on the ipad, it just shows the top item in the list.

My website is http://greengingerdesign.biz/ - I have done lots of customisation for the topbar, so hope I haven't broken it somehow.

You commented on Penny's post over 4 years

Yes - because I have quite a few sub items in my navigation, when this is on the mobile version, they are all visible, and I cannot get to any that aren't on the screen.

You commented on Penny's post over 4 years

I am using a local host, but here is the full html code for the index page, before I've sliced it up for wordpress.

Do I have to specify foundation.topbar.js anywhere?

```<!doctype html>

<script src="http://use.typekit.net/vkz6wly.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Green Ginger | Website Design and Coding</title>

<meta name="description" content="For a new responsive website or re-design of an existing website, get in touch - E:[email protected] T: 07968 196454. London and Gloucestershire">

  <link href="css/normalize.css" rel="stylesheet" media="screen">
  <link href="css/foundation.css" rel="stylesheet" media="screen">
    <link href="css/foundation-icons.css" rel="stylesheet" media="screen">
  <link href="css/app.css" rel="stylesheet" media="screen">
<!-- Top Bar -->
    <div>
    <h1>
           <img class="image-still" src="http://placehold.it/350x50">
          </h1>
  </div>


 <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>

</section>
<!-- MAIN TEXT -->

<section class="home">

  <div class="row">

    <div class="large-8 large-offset-2 columns">
      <h3><strong>I</strong> care about design.</h3>  
      <h3>I take care to make your website the right <strong>design</strong> for you, whether it is a template or designed from scratch.</h3> 
      <h3>I take care to make your content <strong>clear</strong> and accessible. </h3>
      <h3>I love beautiful design, and take care to make your website <strong>beautiful</strong> too.</h3>
      <h3>I design responsive <strong>websites</strong> - so your website will work, wherever it is seen.</h3>
    </div>

  </div>

  <div class="row">

    <div class="large-4 large-offset-4 columns hide-for-small"> 
      <blockquote>"I'm delighted with my new website! It completely fits with the brief - clear, attractive, accessible information, and easy to navigate." - <em>Louise Davies, Bowen therapist</em>
      </blockquote>
    </div>

  </div>

</section>

  <!-- LINKS -->

<section class="links hide-for-small">

  <div class="row">

    <div class="6 columns">
      <p>
        <a class="btn-dl rnd" href="#"><i class="fi-social-apple"></i>about</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>portfolio</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>options</a>
        <a class="btn-dl rnd" href="#"><i class="fi-social-android"></i>contact</a>
       </p>
    </div>

  </div>

</section>

<footer>
    <p>&copy 2015 green ginger</p>
</footer>


<script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>

You commented on Penny's post over 4 years

Thank you for your replies. I still have had no success, however.

There are no errors in the console, and the source code shows jquery, foundation.js and my own file (theme.js) loading.

My theme.js file contains the following:

```jQuery(document).ready(function($) {

$(document).foundation();

$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);

return false

});

});

My functions.php contains the following:

// Load Foundation JS

function foundation_scripts() {

  // Load jQuery 2.0 

  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, null);

  wp_enqueue_script( 'jquery');

  // load Foundation JS

  wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.js', array( 'jquery' ), false, true );

  // load extra Theme JS file, which gets called AFTER Foundation js has been called

  wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'foundation_js' ), false, true );


}

add_action( 'wp_enqueue_scripts', 'foundation_scripts' );




My header.php now includes the full code you gave me, Rafi (which I can see works perfectly in the browser):

<div class="banner-quote row hide-for-small">

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <blockquote><?php the_content(); ?></blockquote>
  <?php endwhile; endif; ?>

</div>

<section class="row full-width navigation-area">

    <div>
    <h1>
           <img class="image-still" src="http://placehold.it/350x50">
          </h1>
  </div>


 <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>

</section>

But I still don't get the dropdown to work. I have gone through the code so many times, and I cannot see what I am doing wrong.

It is so frustrating as a beginner! I would really appreciate help with this. I have been following Treehouse videos to explain how to set up the files etc.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content