Burger Menu not working

• 

  perytonspace · Member · Feb 4, 2024 at 5:34 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m currently working on a website and the burger menu seems like it’s not working. That is the submenus on the mobile version don’t disappear when hovered despite having added CSS elements:

  @media (max-width:599px) {
  a.toggle-nav {
  float: right;
  margin: 0 0 .5em .5em;
  display: inline-block !important;
  color: #fff;
  transition: color linear .15s;
  }
  
  a.toggle-nav:hover, a.toggle-nav:active {
      text-decoration: none;
      color: #fff;
  }
  
  .menu-header {
      display: inline-block;
      position: relative;
      margin: 0;
      width: 100%;
  }
  
  #access .menu-header ul {
      display: none;
      position: absolute;
      top: 80%;
      right: 0;
      min-width: 200px;
      background-color: #7B3D84;
      font-size: 1.2em;
  }
  
  #access .menu-header li {
      display: block;
      float: none;
      padding-right: 2%;
      text-align: right;
  }
  
  #access ul li:hover > ul {
      display: none;
  }
  }

  Could you please help me fix this.

  Mobile version:

  

  Web version:
  

  

  Greatly appreciate your help!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Feb 6, 2024 at 9:31 pm

  • Copy link

  Hello,

  It looks like you’ve added some CSS to style the mobile menu, but it seems the submenus are not behaving as expected. CSS is able to make styling changes, but cannot add some complex functionality such as accordion submenus. That kind of behavior usually needs to be added via a combination of HTML and JavaScript, in addition to CSS.

  Since this requires hiring a developer, we recommend adding a mobile menu plugin to your site. There are many mobile menu plugins available that can provide the functionality you’re looking for without the need for custom development.

  You can search for mobile menu plugins in the WordPress Plugin Directory and choose one that best fits your needs and design preferences.

  https://wordpress.com/plugins/?s=responsive+menus

  Another option (and what I usually recommend as a best practice) is to simplify your menu by creating landing pages for each of your top level menu pages, and show the sub-options on that page. This is because studies have found that mobile visitors make up the bulk of all website traffic these days, and those visitors have been found to ignore deep sub-menus since they can be so hard to navigate on mobile.

  Instead you could for example create a Rocketry landing page, and then on that page present options for Mach-X and National Rocketry Championship, and then link to those sub-pages from the Rocketry page. This would simplify your menu, make navigation easier for both mobile and desktop users. Also the landing pages themselves would only help to strengthen the SEO on your site.

  I hope this helps! If you have any other questions or need further assistance, feel free to let me know.

  

  <button type=”button” aria-haspopup=”true” aria-expanded=”false” class=”components-button block-editor-inserter__toggle has-icon” aria-label=”Add block”><svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ width=”24″ height=”24″ aria-hidden=”true” focusable=”false”><path d=”M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z”></path></svg></button>