title: "Sub-Categories responsive issue on server"
body: <p>I have just uploaded my website on hosting server.When I put my mouse cursor on sub categories and click on it - it opens....but when on smartphone, I try to touch sub categories, it closes the whole navbar. </p>
  
  <p>I tried to increase font size but it didn't work. Here is my website booksjerry.com  You can check yourself</p>
  
  <pre><code>&lt;div id="navigation"&gt;
          &lt;!-- container --&gt;
          &lt;div class="container"&gt;
              &lt;div id="responsive-nav"&gt;
                  &lt;!-- category nav --&gt;
                  &lt;div class="category-nav"&gt;
                      &lt;span class="category-header"&gt;Fire Discount Categories &lt;i class="fa fa-list"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;ul class="category-list"&gt;
                          &lt;li class="dropdown side-dropdown"&gt;
                              &lt;a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=COLLECTION OF BOOKS SETS"&gt;Collection of Books Sets&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;div class="custom-menu"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;ul class="list-links"&gt;
                                              &lt;li&gt;
                                                  &lt;h3 class="list-links-title"&gt; Sub-Categories&lt;/h3&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="productssub.php?sub=SETS OF NOVELS"&gt;SETS OF NOVELS&lt;/a&gt;&lt;/li&gt;
  
                                          &lt;/ul&gt;
                                          &lt;hr class="hidden-md hidden-lg"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;ul class="list-links"&gt;
                                              &lt;li&gt;
  
                                              &lt;li style="padding-top:26px;"&gt;&lt;a href="productssub.php?sub=SETS OF CHILDREN NOVELS"&gt;Sets of Childern Novels&lt;/a&gt;&lt;/li&gt;
  
                                          &lt;/ul&gt;
                                          &lt;hr class="hidden-md hidden-lg"&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
  
  
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;ul class="category-list"&gt;
                          &lt;li class="dropdown side-dropdown"&gt;
                              &lt;a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=URDU BOOKS"&gt;Urdu Books&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;div class="custom-menu"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;ul class="list-links"&gt;
                                              &lt;li&gt;
                                                  &lt;h3 class="list-links-title"&gt; Sub-Categories&lt;/h3&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="productssub.php?sub=FICTION"&gt;Fiction&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="productssub.php?sub=NON-FICTION"&gt;Non-Fiction&lt;/a&gt;&lt;/li&gt;
  
                                          &lt;/ul&gt;
                                          &lt;hr class="hidden-md hidden-lg"&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-4"&gt;
                                          &lt;ul class="list-links"&gt;
                                              &lt;li&gt;
  
                                              &lt;li style="padding-top:26px;"&gt;&lt;a href="productscat.php?cat=SETS OF CHILDREN NOVELS"&gt;Sets of Childern Novels&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li &gt;&lt;a href="productssub.php?sub=SELP-HELP"&gt;Self-help&lt;/a&gt;&lt;/li&gt;
                                                      &lt;li&gt;&lt;a href="productssub.php?sub=POETRY/PHILOSPHY"&gt;Poetry/Philosphy&lt;/a&gt;&lt;/li&gt;
  
                                          &lt;/ul&gt;
                                          &lt;hr class="hidden-md hidden-lg"&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/li&gt;
  
  
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
  ---CSS--
  .category-nav {
    float: left;
    width: 270px;
  }
  
  .category-nav .category-header {
    padding: 15px;
    display: block;
    text-transform: uppercase;
    background: #F8694A;
    color: #FFF;
    font-weight: 700;
  }
  
  .category-nav .category-header&gt;i {
    float: right;
    line-height: 20px;
  }
  
  .category-nav .category-list {
    position: absolute;
    width: 270px;
    background-color: #FFF;
    border-left: 1px solid #DADADA;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
    z-index: 50;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }
  
  .category-nav.show-on-click .category-list {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0px, 15px);
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
  }
  
  .category-nav.show-on-click .category-list.open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  
  .category-nav .category-list&gt;li+li {
    border-top: 1px solid #DADADA;
  }
  
  .category-nav .category-list&gt;li.dropdown&gt;.dropdown-toggle&gt;i {
    float: right;
    line-height: 20px;
  }
  
  .category-nav .category-list&gt;li&gt;a {
    display: block;
    padding: 15px;
    text-transform: uppercase;
  }
  
  .category-nav .category-list&gt;li&gt;a:hover, .category-nav .category-list&gt;li&gt;a:focus, .category-nav .category-list&gt;li.dropdown.open&gt;a {
    color: #F8694A;
  }
  
  </code></pre>
  
  <p>What I want is whenever I touch sub categories list on smartphone, it should open a new page as it happens in all smartphone optimized websites.</p>