Streaming live at 10am (PST)

Responsive hamburger menu not working on mobile safari

#1

I have been going in circles looking for a solution to a problem I never thought could exist in 2019.

I am busy building a site and made use of the Hamburger menu for smaller screen sizes. Everything looks good in Google Dev tools for multiple devices, but once I do a real world test on my iPhone 5SE the hamburger menus is dead, and the styling of the “Order now!” button is messed up?

Is there an easy way to change the css or JS so that the site can work on ios?

The site is a work in progress but you can view it here: http://www.encoreservices.co.za/ESMS/index.html

This is my code:
JS:

document.addEventListener("click", function (e) {
  if (e.target.id === "burger-time") {
    document.querySelector('nav').classList.add('open');
    document.getElementById('burger-time').style.visibility = 'hidden';
  } else {
    document.querySelector('nav').classList.remove('open');
    document.getElementById('burger-time').style.visibility = 'visible';
  }
});

CSS:

#header-nav-background {
  display: block;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, .5);
  height: 54px;
  width: 100%;
}

#header-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(31, 70, 189);
  background-color: rgba(31, 70, 189, 1);
  z-index: 1200;
}

.button-style {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

#burger-time{
  position: absolute;
  visibility: hidden;
}

@media screen and (max-width: 669px) and (min-width: 300px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 5px solid #02b3e4;
    border-bottom-style: none;
  }
  nav {
    width: 140px;
    height: 400px;
    -webkit-transform: translate(-565px, 0);
    -ms-transform: translate(-140px, 0);
    -moz-transform: translate(-140px, 0);
    -o-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
  }
  .hidden {
    visibility: hidden;
  }

  .li .a {
    display: block;
    color: white;
    padding: 11px 45px 19px 0;
    text-decoration: none;
    width: 100%;
  }

 /* Change the link color to rgba(31, 70, 189, 1) on hover */
  .li .a:hover {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    text-shadow: 1px 1px 0 black;
    background-color: white;
  }

  .button-style {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
  }

  #header-nav-background {
    display: block;
    background-color: rgb(31, 70, 189);
    background-color: rgba(31, 70, 189, 1);
    height: 54px;
  }

  #burger-time{
    position: absolute;
    visibility: visible;
    display: flex;
    padding: 0 2px 2px 0;
    font-size: 52px;
    transform: translate(140px, 0);
    color: white;
    text-shadow: 2px 2px 2px black;
  }

  #burger-time:hover {
    text-decoration: none;
    color: rgb(31, 70, 189);
    color: rgba(31, 70, 189, 1);
    font-weight: 600;
    background-color: white;
    text-shadow: 1px 1px 1px black;
  }
  
}

HTML:

<div id="header-nav-background">
  <nav>
    <ul id="header-ul">
      <li class="li button-style"><a class="a" href="index.html">Home</a></li>
      <li class="li button-style">
        <a class="a" href="services.html">Services</a>
      </li>
      <li class="li button-style"><a class="a" href="about.html">About</a></li>
      <li class="li button-style">
        <a class="a" href="contact.html">Contact us</a>
      </li>
      <i id="burger-time" class="material-icons">menu</i>
    </ul>
  </nav>
</div>
#2

Hi @3otes

It looks like you didn’t make the linked site with the use of Webflow?

1 Like
#3

Hi there,

Yes you are correct, I did not build this with the awesome tools found on Webflow.
While looking for answers to this question Google directed me to Webflow forums where
this seemed to be a common problem? So I am asking on every forum I can to see if anyone has the answer? All the tickets are closed on this subject but no answer is given?

Did Webflow find a solution?

#4

@3otes

I cannot answer your question due to my lack of knowledge of javascript.

What I can do though, is advice you to build your site in Webflow, just open a free account and start building. I can assure you that the hamburger menu will work when your site is built with Webflow.

Go and give it a try :+1:

#5

Hola corazón como estas_emphasized text_

closed #6