Support » Fixing WordPress » Remove hamburger menu toggle when mobile menu is open

  • When the mobile menu is open, the hamburger icon is showing along with the X (close). I want to remove the hamburger icon from showing in the active mobile menu and leave the X.

    The issue began when I manually added an icon to replace the standard hamburger toggle.

    .menu-mobile-toggle {
      display:block;   
      background-image: url("http://danielleclevy.com/wp- 
      content/uploads/2018/05/if_Hamburger_657904-1.png");
      background-repeat: no-repeat;
      background-size: contain;
      width: 30px;
      height: 30px;
      text-indent: -9999px;
      white-space: nowrap; 
      background-color: transparent;
      border: none;
      outline: 0;
      margin-top: 30px;
    }
    • This topic was modified 1 year, 8 months ago by Steve Stern.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi @megvc,

    The way you changed your CSS is not exactly the ideal way to do it, but fortunately there’s a quick fix to your problem, by adding the following custom CSS:

    .menu-mobile-active .menu-mobile-close {
        background-image: none;
    }

    Basically, by removing the background-image when the mobile menu is active, you will effectively disable the hamburger image you added.

    Cheers! 🙂

    Thank you thank you thank you! That worked

    You suggested there is a better way of coding this, what is the other option?

    You suggested there is a better way of coding this, what is the other option?

    If you take a look at style.css (may have been your edition or the way your theme was set up originally), you will notice that the hamburger image CSS, background-image: 'if_Hamburger_657904-1.png' and all related CSS is repeated three times in these queries:

    #1: (line 298)
    @media only screen and (max-width: 780px)
    @media only screen and (max-width: 600px)
    
    #2: (line 264)
    @media only screen and (max-width: 780px)
    
    #3: (line 232)
    @media only screen and (max-width: 780px)

    You actually would only need one query where the hamburger menu appears for tablets or smaller, and that would include smartphones. Nevertheless as long as it works you shouldn’t worry too much 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove hamburger menu toggle when mobile menu is open’ is closed to new replies.