title: JavaScript: dynamic navigation bar with dropdown disturbs dropdown element widths
body: <p>Thank you for considering this question.</p>
  
  <p>The code can be found on GitHub, <a href="https://github.com/SumNeuron/dynamic-html-reusable-js">here</a>.</p>
  
  <p>There are a few things going on here, so before we get to the code I want explain a bit about it.</p>
  
  <p>I have a function makeNavigation that takes three parameters to make the navigation bar: an array of items for the navigation bar, the element id of where the navigation bar should go, and a size.</p>
  
  <p>This works pretty well when the margins are not included. However as soon as the two lines for the margins are uncommented, then the drop down content is much larger than it should be. Thoughts?</p>
  
  <p>In addition, when the window is collapse as small as possible, rather than having just one drop-down element, "Home" and the drop-down bars are stacked. Why / how could I correct this?</p>
  
  <p>NOTE: I source <a href="http://www.w3schools.com/w3css/w3css_downloads.asp">W3 CSS</a> and <a href="http://ianlunn.github.io/Hover/">hover-master</a></p>
  
  <p>So for variables we have pages and the "sizes".</p>
  
  <pre><code>var pages = ["HOME","ABOUT","PAGE3","PAGE4","PAGE5","PAGE6","PAGE7","PAGE8"];
  var extraSmall, small, medium, large;
  extraSmall = 610;
  small = 700;
  medium = 800;
  large = 1250;
  </code></pre>
  
  <p>For functions:</p>
  
  <pre><code>function getSizeInText(size) {
  
    if (size &gt; large) {
      return("large")
    };
    if (extraSmall &lt; size &amp;&amp; size &lt;  medium) {
      return("small")
    };
    if (medium &lt;= size &amp;&amp; size &lt;= large) {
      return("medium")
    };
    if (size &lt;= extraSmall) {
      return("extraSmall")
    }
  }
  
  function makeNavigation(navArray, navID, size) {
  
    var theID = document.getElementById(navID);
    var mar = 8;
    var pad = 2;
    theID.innerHTML = null;
    // theID.style.marginRight = mar + "%";
    // theID.style.marginLeft = mar + "%";
    theID.style.marginTop = mar/4 + "%";
    if (size == "extraSmall") {
      var numNav = navArray.length;
      theID.innerHTML += '&lt;li class="w3-dropdown-hover w3-centered" '+
      'style="width:' + spaceAllocated + '%" &gt;' +
      '&lt;a class="hvr-reveal navFont"&gt;' +
      '&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;' +
      '&lt;ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%"&gt;' +
      '&lt;/ul&gt;' + '&lt;/li&gt;';
      for (var i = 0; i &lt; numNav; i++ ) {
        document.getElementById('dropDownContent').innerHTML+=
        '&lt;li style="width:' +
        (100 - 2*pad) + '%"&gt;'+
        '&lt;a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html"&gt;' +
        navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      }
    }
  
  
    if (size == "small") {
      var numNav = navArray.length;
      var spaceAllocated = (100 ) / 2;
      for (var i = 0; i &lt; 1; i++) {
          theID.innerHTML +=
          '&lt;li style = "width:' +
          spaceAllocated +
          '%"&gt;&lt;a  class="hvr-reveal navFont"' +
          ' href="' +
          navArray[i].toLowerCase() +
          '.html"&gt;' +
          navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      };
      theID.innerHTML += '&lt;li class="w3-dropdown-hover w3-centered" '+
      'style="width:' + spaceAllocated + '%" &gt;' +
      '&lt;a class="hvr-reveal navFont"&gt;' +
      '&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;' +
      '&lt;ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%"&gt;' +
      '&lt;/ul&gt;' + '&lt;/li&gt;';
      for (var i = 1; i &lt; numNav; i++ ) {
        document.getElementById('dropDownContent').innerHTML+=
        '&lt;li style="width:' +
        (100 - 2*pad) + '%"&gt;'+
        '&lt;a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html"&gt;' +
        navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      }
    }
  
    if (size == "medium") {
      var numNav = navArray.length;
      var half = Math.floor(numNav/2);
      var spaceAllocated = (100 )  / (half+1);
  
      for (var i = 0; i &lt; half; i++) {
          theID.innerHTML +=
          '&lt;li style = "width:' +
          spaceAllocated +
          '%"&gt;&lt;a  class="hvr-reveal navFont"' +
          ' href="' +
          navArray[i].toLowerCase() +
          '.html"&gt;' +
          navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      };
  
      theID.innerHTML += '&lt;li class="w3-dropdown-hover w3-centered" '+
      'style="width:' + spaceAllocated + '%" &gt;' +
      '&lt;a class="hvr-reveal navFont"&gt;' +
      '&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;' +
      '&lt;ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%"&gt;' +
      '&lt;/ul&gt;' + '&lt;/li&gt;';
      for (var i = half; i &lt; numNav; i++ ) {
        document.getElementById('dropDownContent').innerHTML+=
        '&lt;li style="width:' +
        (100 - 2*pad) + '%"&gt;'+
        '&lt;a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html"&gt;' +
        navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      }
    };
  
    if (size == "large") {
      var numNav = navArray.length;
      var spaceAllocated = (100 )  / numNav;
  
      for (var i = 0; i &lt; numNav; i++) {
          theID.innerHTML +=
          '&lt;li style = "width:' +
          spaceAllocated +
          '%"&gt;&lt;a  class="hvr-reveal navFont"' +
          ' href="' +
          navArray[i].toLowerCase() +
          '.html"&gt;' +
          navArray[i] + '&lt;/a&gt;&lt;/li&gt;';
      };
    };
  }
  </code></pre>
  
  <p>and then in the HTML:</p>
  
  <pre><code>&lt;div class="w3-container w3-section"&gt;&lt;ul id="navBar" class="w3-navbar w3-center"&gt;&lt;/ul&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var windowWidth;
      var size;
  
      jQuery(document).ready(function(){
        windowWidth = jQuery(window).width();
        size = getSizeInText(windowWidth);
        if (windowWidth &gt; large) {}
        if (windowWidth &lt;  medium) {}
        if (medium &lt;= windowWidth &amp;&amp; windowWidth &lt;= large) {}
      });
  
      jQuery(window).resize(function () {
        windowWidth = jQuery(window).width();
        size = getSizeInText(windowWidth);
        if (windowWidth &gt; large) {
          makeNavigation(pages, "navBar", size);
        }
  
        if (windowWidth &lt;  medium) {
          makeNavigation(pages, "navBar", size);
        }
  
        if (medium &lt;= windowWidth &amp;&amp; windowWidth &lt;= large) {
          makeNavigation(pages, "navBar", size);
        }
  
  
  
      });
    &lt;/script&gt;
  </code></pre>
  
  <h1>Update</h1>
  
  <p>programmer5000 gave a solution to this particular problem. However the same solution does not work when not using w3-css. How come?</p>
  
  <pre><code>/* Drop down content */
  li a, .dropbtn {
      display: inline-block;
      text-align: center;
      text-decoration: none;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      text-align: center;
      width: inherit;
      z-index: 1;
  }
  
  .dropdown-content a {
      text-decoration: none;
      display: block;
  }
  
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  
  
  
  &lt;nav id ='navigation-bar'&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt; HOME &lt;/a&gt;&lt;/li&gt;    
      &lt;li class="dropdown"&gt;
        &lt;a class="dropbtn"&gt;TEST&lt;/a&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a&gt;1&lt;/a&gt;
          &lt;a&gt;2&lt;/a&gt;
          &lt;a&gt;3&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>