title: Why is my navbar scaling the page on mobile?
body: <p>My website has a scaling problem on the chrome browser in android on mobile. This does not happen in Firefox on mobile or in any desktop browser. When the navbar is selected and drops down, it scales the webpage. Note that the page is scaled differently depending on which dropdown has been selected. It seems as though the navbar has invisible content that is breaking frame when the dropdown behavior is engaged.</p>
  
  <p>I have stitched together 4 screenshots of the issue.</p>
  
  <p>Help with either a fix or a workaround would be much appreciated.</p>
  
  <p><img src="https://i.stack.imgur.com/b7gcZ.jpg" alt="scaling issue"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#NavigationBarList{
  list-style-type:none;
  padding:0;
  }
  
  li{
  font-size:130%;
  }
  
  nav a{
  display:block;
  }
  
  /* This customizes the presentation of the list elements (menu items) in the navbar. */
  nav li{
  display:block;
  font-weight:bold;
  font-size:200%;
  color:#7F1717;
  background-color:#9E939E;
  width:25%;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  z-index:11;
  -moz-box-shadow:    inset 0 0 1px #000000;
  -webkit-box-shadow: inset 0 0 1px #000000;
  box-shadow:         inset 0 0 1px #000000;
  }
  
  nav ul{
  width:100%;
  }
  
  /* Hide the sub menu items. */
  nav ul ul {
  display:none;
  }
  
  nav ul ul ul {
  display:none
  }
  
  /* When hovered over, the CSS menu will drop down. */
  nav li:hover &gt; ul {
  text-align:center;
  font-size:40%;
  display:block;
  }
  
  /* Don't underline links in the list elements (menu items). */
  ul a {
  text-decoration:none;
  color:#7F1717;
  }
  
  /* Change the background color of hovered list elements. This was both active and hover... */
  nav li:hover{
  background-color:#625C62;
  }
  
  /* This customizes the ul elements in the sub-menu. */
  nav ul ul{
  position:absolute;
  padding:0;
  width:100%
  }
  
  nav ul ul ul{
  position: absolute;
  width:400%;
  left:100%;
  top:0;
  }
  
  #totheleft{
  left:-100%;
  }
  
  nav ul ul ul li{
  text-align:center;
  font-size:250%;
  }
  
  /* I think this refers to the dropdown navbar location and properties. */
  nav ul ul li {
  position:relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul id="NavigationBarList"&gt;
      &lt;li style="float:left;"&gt;Events
      &lt;ul&gt;
     &lt;li&gt;&lt;a href="tournaments.html"&gt;Tournaments&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="kids_hour.html"&gt;Kid's Hour&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="calendar.html"&gt;Local Calendar&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li style="float:left;"&gt;Programs
   &lt;ul&gt;
     &lt;li&gt;&lt;a href="summer_camps.html"&gt;Summer Camps&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;In Schools
     &lt;ul&gt;
    &lt;li&gt;&lt;a href="schools.html"&gt;After School&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="school_registration.html"&gt;Registration&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href="instructors.html"&gt;Local Instructors&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li style="float:left;"&gt;Content
   &lt;ul&gt;
     &lt;li&gt;&lt;a href="posts.html"&gt;Posts&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="games.html"&gt;Games&lt;/a&gt;
   &lt;/ul&gt;
   &lt;/li&gt;
      &lt;/li&gt;
   &lt;li style="float:left;"&gt;Connect
   &lt;ul&gt;
     &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;Resources
     &lt;ul id="totheleft"&gt;
       &lt;li&gt;&lt;a href="links.html"&gt;Chess&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="go_links.html"&gt;Go&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="xiangqi_links.html"&gt;Xiangqi&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="shogi_links.html"&gt;Shogi&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="backgammon_links.html"&gt;Backgammon&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href="about us.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>