Duplicate Mobile Menus

Hello,

I’ve tried everything I can think of but this is driving me around the bend!

I use a child theme of fruitful and the responsive setting is turned on in the theme options. When viewing the site on mobile, 2 menus appear. So far I’ve tried using CSS to hide one of the menus but I cannot find a way to do this without removing both of them. So it seems its both of them or nothing!

the code in my header.php relating to the navigation is as follows

<nav role="navigation" class="site-navigation main-navigation">
											<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
										</nav><!-- .site-navigation .main-navigation -->

and the code as it appears on the site is like this

<nav role="navigation" class="site-navigation main-navigation">
  <div class="menu-top-navigation-container"><ul id="main-menu-1" class="menu">
    <li id="menu-item-953" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-953"><a href="https://www.cossetandcoddle.com/">Home</a></li>
    <li id="menu-item-954" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-104 current_page_item menu-item-954"><a href="https://www.cossetandcoddle.com/about/">About</a></li>
    <li id="menu-item-956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-956"><a href="https://www.cossetandcoddle.com/gallery/">Gallery</a></li>
    <li id="menu-item-955" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-955"><a href="https://www.cossetandcoddle.com/contact/">Contact</a></li>
  </ul>
  <select id="mobile-menu-1" class="select-menu" style="max-width: none; margin: 0px 0px 25px;"><option value="#">Navigate to...</option>
    <option value="https://www.cossetandcoddle.com/">&nbsp;Home</option>
    <option value="https://www.cossetandcoddle.com/about/">&nbsp;About</option>
    <option value="https://www.cossetandcoddle.com/gallery/">&nbsp;Gallery</option>
    <option value="https://www.cossetandcoddle.com/contact/">&nbsp;Contact</option>
  </select>
  <select id="mobile-menu-1" class="select-menu" style="max-width: none; margin: 0px 0px 25px;"><option value="#">Navigate to...</option>
    <option value="https://www.cossetandcoddle.com/">&nbsp;Home</option>
    <option value="https://www.cossetandcoddle.com/about/">&nbsp;About</option>
    <option value="https://www.cossetandcoddle.com/gallery/">&nbsp;Gallery</option>
    <option value="https://www.cossetandcoddle.com/contact/">&nbsp;Contact</option>
  </select>
  </div>
</nav>

To see for yourself head to https://www.cossetandcoddle.com

Any ideas?

Thanks

EDIT – Edited second block of code to make it easier to read.