2 Menu Toggles not working together

  • I have installed the Automattics classic blog starter theme and building on top of that.

    I had one menu toggle installed, but wanted two.
    One works but the other doesn’t. It seems that they only work when I have one toggle.

    Does anyone know of a way around this?

    My code:

    header.php

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

        <nav id="site-navigation" class="topbar" role="navigation">
            <button class="menu-toggle" aria-controls="main" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'ohlily' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'topbar', 'menu_id' => 'topbar' ) ); ?>
        </nav>

        <header id="masthead" class="site-header" role="banner">
            <?php get_template_part( 'components/header/header', 'image' ); ?>
            <?php ohlily_the_custom_logo(); ?>

            <nav id="site-navigation" class="main-navigation" role="navigation">	
                <button class="menu-toggle" aria-controls="main" aria-expanded="false"><?php esc_html_e( 'Main Menu', 'ohlily' ); ?></button>
                <?php wp_nav_menu( array( 'theme_location' => 'main', 'menu_id' => 'main' ) ); ?>
            </nav><!-- #site-navigation -->

         </header>
    <div id="content" class="site-content">

    CSS:

    /*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.topbar { 
  background: #eee;
  width: 100%;
  position: fixed;
}
.main-navigation {
  background: #333;
  margin-bottom: 50px;
}
.topbar,
.main-navigation {
  text-align: center;
  clear: both;
  display: block;
  width: 100%;
  padding: 0;
}

.topbar ul,
.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
}
.topbar ul ul,
.main-navigation ul ul {
  text-align: left;
  background: red;
  padding: 0;
  float: left;
  position: absolute;
  top: 2.7em;
  left: -999em;
  z-index: 99999;
}
.topbar ul ul ul,
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.topbar ul ul li:hover > ul, .topbar ul ul li.focus > ul,
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
  left: 100%;
}
.topbar ul ul a,
.main-navigation ul ul a {
  width: 220px;
}
.topbar ul li:hover > ul,
.topbar ul li.focus > ul,
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}
.topbar li,
.main-navigation li {
  position: relative;
  display: inline-block;
}
.topbar a,
.main-navigation a {
  padding: 10px 30px;
  display: block;
}

/* Small menu. */
.menu-toggle,
.topbar.toggled ul,
.main-navigation.toggled ul {
  display: block;
}
.topbar .menu-toggle { background: blue; }
.main-navigation .menu-toggle { background: green; }

.menu-toggle:before {
  content: "\2630";
  display: inline-block;
  margin-right: 5px;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .topbar ul,
  .main-navigation ul {
    display: block;
  }

    If anyone could shed any light, that would be much appreciated.

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

  • This is not a WordPress issue however by looking at your code, I see you are using the same ID for two elements <nav id="site-navigation"

    Two elements cannot have the same ID, you can try by changing the other one to <nav id="site-navigation-2" or anything unique, which might make it work.

    If it still does not, it would be better to ask the theme support for that.

    Thread Starter pixelboutiqueuk

    (@pixelboutiqueuk)

    I know it’s not a WP issue, it’s a code issue, but I can’t see how.
    I have tried with the id change too but that doesn’t work.

    Thanks anyway.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘2 Menu Toggles not working together’ is closed to new replies.