blogger menu not showing on mobile screen

Question

blogger blog's menu doesn't show on mobile phones, and it produces many blank white lines when shown on mobile phone. But it works correctly on computer screen. What is wrong with the code?

This is the link of blog : My Blog

Menu = Home | Contact Us | About Us | پاکستان | .....

Theme's Menu Code:

<!-- main menu -->
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>



<ul>
  <li><a class='active' href='https://www.dailylekhaari.com'>Home</a> </li>
  <li><a href='https://www.dailylekhaari.com/p/contact-us.html'>Contact Us</a></li>
  <li><a href='https://www.dailylekhaari.com/p/about.html'>About Us</a></li>

  <li><h1 style='     padding: 14px 16px;     padding-top: 14px;     padding-right: 16px;     padding-bottom: 0px;     padding-left: 16px; '><font color='white'>*   </font></h1></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D9%BE%D8%A7%DA%A9%D8%B3%D8%AA%D8%A7%D9%86'>پاکستان</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A8%DB%8C%D9%86%20%D8%A7%D9%84%D8%A7%D9%82%D9%88%D8%A7%D9%85%DB%8C'>بین الاقوامی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85'>اسلام </a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%D8%A7%D8%A6%D9%86%D8%B3%20%D9%88%20%D9%B9%DB%8C%DA%A9%D9%86%D8%A7%D9%84%D9%88%D8%AC%DB%8C'>سائنس ٹیکنالوجی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%DA%BE%DB%8C%D9%84'>کھیل</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%D8%A7%D9%84%D9%85%D8%B2'>کالمز</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%DB%8C%D8%A7%D8%B3%D8%AA'>سیاست</a></li>

</ul>



<!-- main menu end -->

Answer 1

Just remove HTML comments, remove <!-- hamara main menu and hamara main menu end -->

To show menu on mobile add this to CSS

.header-wrap ul { overflow: visible !important }

Answer 2

It's caused because you have not specified float or simply you can use clearfix hack.

Just add Clearfix after headerwrap .

<div id="header-wrap"> ... </div>
<!-- This clearfix used for clearing floats between elements -->
<div class="clearfix"></div>