Sticky Navbar исчезает, когда я нажимаю на гамбургер только в мобильном представлении

Question

Не уверен, почему, но липкая панель навигации работает нормально, за исключением случаев, когда я прокручиваю вниз в мобильном представлении. Когда я нажимаю «Menu Click Here», вся навигационная панель исчезает.

Я думаю, что функция javascript удаляет липкий класс, но я не уверен, как это исправить.

http://lonestarwebandgraphics.com/

/* Toggle between adding and removing the "responsive" class to bottomnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("mybottomnav");
if (x.className === "bottomnav") {
x.className += " responsive";
} else {
x.className = "bottomnav";
}
}

Answer 1

Проблема в вашей функции myFunction.

<a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p>  ☰</a>

Здесь вы вызываете myFunction(), чтобы переключить состояние меню гамбургера. Тем не менее, myFunction не может управлять переключением.

Таким образом, чтобы оно работало, измените текущую версию

function myFunction() {
  var x = document.getElementById("mybottomnav");
  if (x.className === "bottomnav") {
    x.className += " responsive";
  } else {
    x.className = "bottomnav";
  }
}

на следующую:

function myFunction() {
  var x = document.getElementById("mybottomnav");
  if(x.classList.contains("responsive")) {
    x.classList.remove("responsive");
  } else {
    x.classList.add("responsive");
  }
}