title: Bootstrap navbar missing on mobile
body: <p>I have created a web page, it is working fine on computer but I noticed that the navigation bar is missing when I view the page on my mobile (iphone). </p>
  
  <p>Here is my page code:</p>
  
  <p>script: </p>
  
  <pre><code>$(document).ready(function() {
  
              $(".content").load("defaultcontent.html");
  
              $(".about").click(function(e) {
                  $(".content").load("about.html");
              });
  
              $(".home").click(function(e) {
                  $(".content").load("defaultcontent.html");
              });
  
              $(".products").click(function(e) {
                  $(".content").load("products.html");
              });
  
              $(".contact").click(function(e) {
                  $(".content").load("contactus.html");
              });
  
          });
  </code></pre>
  
  <p>css: </p>
  
  <pre><code> body {
          background-image:
              url("https://www.airmanchallenge.com/images/backgroundSite.jpg");
          color: white;
      }
  
      .navbar&gt;a:hover {
      background-color: black;
          color: white;
      }
  
      .topnav &gt;a:hover {
      background-color: black;
          color: white;
      }
  
      .content {
          height: 400px;
          overflow-y: auto;
      }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Sample Page&lt;/title&gt;
      &lt;link
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"
          src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"
          src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"
          src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header class="text-center"&gt;
              &lt;h1&gt;ABC Store&lt;/h1&gt;
              &lt;p&gt;some description&lt;/p&gt;
          &lt;/header&gt;
  
          &lt;nav role="navigation" class="navbar navbar-default"  &gt;
      &lt;!-- Collection of nav links and other content for toggling --&gt;
      &lt;div id="navbarCollapse" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav topnav"&gt;
              &lt;li&gt;&lt;a class="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="products"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;span&gt;
                      &lt;div class="row-sm-12 row-md-12 row-lg-12 content"
                          style="background-color: lightblue;"&gt;&lt;/div&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;footer class="text-center"&gt; &amp;#169; ABC Group. All Rights
              Reserved &lt;/footer&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>What should I add to the html div to make the navbar visible on my mobile? 
  I have hosted my webpage on <a href="http://sampledreamstore.000webhostapp.com" rel="nofollow noreferrer">http://sampledreamstore.000webhostapp.com</a>.</p>
  
  <p>Thanks</p>