Menu icon Foundation
Duplicate burger icon in Top Bar

I am using JointsWP template, and using Top Bar. When I reduce my screen size, two burger icons appear. I can edit the colour of one,

Screen shot 2015 09 17 at 15.00.24

I have tried deleting the following code from style.css

            

          .top-bar .toggle-topbar.menu-icon a {
        color: #FFFFFF;
        height: 34px;
        line-height: 33px;
        padding: 0 2.6rem 0 1.6rem;
        position: relative; } 

This removes the purple icon, but the code all reappears when I try and make my logo img "display: none" for mobile.

Any ideas how to remove one of the burger icons?

jointswpFoundationtop bar

I am using JointsWP template, and using Top Bar. When I reduce my screen size, two burger icons appear. I can edit the colour of one,

Screen shot 2015 09 17 at 15.00.24

I have tried deleting the following code from style.css

            

          .top-bar .toggle-topbar.menu-icon a {
        color: #FFFFFF;
        height: 34px;
        line-height: 33px;
        padding: 0 2.6rem 0 1.6rem;
        position: relative; } 

This removes the purple icon, but the code all reappears when I try and make my logo img "display: none" for mobile.

Any ideas how to remove one of the burger icons?

Tim Hartwick about 4 years ago

That's pretty odd! Can you post some of the HTML markup for the top-bar. I have a feeling that somehow the HTML is getting duplicated.

Thanks!

Penny about 4 years ago

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

Jeremy Englert about 4 years ago

Hi Penny,

I just installed a fresh version of JointsWP-CSS and I can't replicate this issue.

Can you provide a link for me to check out?

Jeremy Englert about 4 years ago

Looking at your HTML, I think the logo image is meant to be inside the A tag (otherwise it won't work as a link). Have you tried that?

Like this:

<h1> <a href="<?php echo home_url(); ?>" rel="nofollow"><img class="logo-home" src="http://subsite08.dev/wp-content/uploads/sites/9/2015/09/TTRC-flag-grey.gif"></a></h1>