My javascript mobile menu only opens when double clicked.

Question

I'm making a website for my friend using just HTML/CSS3 and Vanilla JS. Everything seems to be going OK but I can't figure out why my mobile menu only opens when I click it twice. It only does this the first time I try clicking it after refreshing the page. Once it's open I can open and close it again with one click.

Here is the relevant HTML

            <header id = "top-menu">
            <img id = "title-image" class = "desktop-site" src = "images/ben-the-mover-guy.png">
            <img id = "mobile-title-image" class = "mobile-site" src = "images/mobile-title-white.png">
            <h1 id = "title-text">Ben the Mover Guy</h1>
            <a id = "mobile-icon" href = "javascript:void(0);" onClick = "dropDown()"><i id = "mobile-icon-id" class = "ion-navicon-round"></i></a>
            <nav id = "icon-nav" class = "desktop-site">
                <a href = "#"><i class = "ion-social-facebook"></i></a>
                <a href = "#"><i class = "ion-android-mail"></i></a>
                <a href = "#"><i class = "ion-ios-calculator"></i></a>
            </nav>
            <nav id = "main-nav" class = "horizontal-nav desktop-site">
                <span class = "selected"><a href = "#" class = "nav-link">ABOUT</a></span>
                <a href = "#" class = "nav-link">RATES</a>
                <a href = "#" id = "link-break" class = "nav-link"> <span class = "link-break-line">PREPARING FOR</span> YOUR MOVE</a>
                <a href = "#" class = "nav-link">CONTACT</a>
            </nav>
        </header>

and Javascript

function dropDown() {
var x = document.getElementById("main-nav");
var y = document.getElementById("mobile-icon-id");

if (x.className === "horizontal-nav") {
    x.className = "mobile-nav";
    y.className = "ion-close-round"
} else {
    x.className = "horizontal-nav";
    y.className = "ion-navicon-round"
}
}

The issue is definitely not the CSS. After hitting up Inspect Element I noticed that it's not changing the class name to "mobile-nav" until the second click, so it's an issue with the JS.

I did a mock website a while ago where I used similar code and I didn't have this problem. The only difference was that I used a div with a unordered list for the nav links instead of the '' tag. That wouldn't have anything to do with it would it?

I'd say that your problem is hover ;). On mobile devices hover is a first click. — Vivick
– Vivick, Commented Apr 16, 2017 at 20:57

furkle · Accepted Answer · 2017-04-16 21:02:33Z

2

The reason this is occurring is because you're checking the className attribute, which contains all classes of the element. The first time it's being checked, the value is not horizontal-nav -- it's horizontal-nav desktop-site, which causes the code in the else block to fire. The second time around, it is horizontal-nav, so it works correctly.

Use x.classList.contains("horizontal-nav"), or build/use a method to check whether className contains horizontal-nav rather than is horizontal-nav. jQuery's hasClass works perfectly for this, if you need to support older browsers.

answered Apr 16, 2017 at 21:02

furkle

5,0591 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitin Walia · Accepted Answer · 2017-04-16 21:26:54Z

1

change your js function to this and it will work..

function dropDown() {
  var x = document.getElementById("main-nav");
  var y = document.getElementById("mobile-icon-id");
  if (x.classList.contains("horizontal-nav")) {
      x.className = "mobile-nav";
      y.className = "ion-close-round"
  } else {
      x.className = "horizontal-nav";
      y.className = "ion-navicon-round"
  }
}

answered Apr 16, 2017 at 21:26

Nitin Walia

4232 silver badges9 bronze badges

Collectives™ on Stack Overflow

My javascript mobile menu only opens when double clicked.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related