Меню блога не отображается на экране мобильного телефона. - PullRequest
Новая
       51

Меню блога не отображается на экране мобильного телефона.

0 голосов
/ 19 декабря 2018

Меню блога блоггера не отображается на мобильных телефонах и выдает много пустых белых линий при отображении на мобильном телефоне.Но это работает правильно на экране компьютера.Что не так с кодом?

Это ссылка на блог: Мой блог

Меню = Главная |Связаться с нами |О нас ||اکستان |.....

Код меню темы: 

<!-- 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 -->

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Это вызвано тем, что вы не указали float или просто можете использовать метод взлома clearfix.

Просто добавьте Clearfix после headerwrap. 

<div id="header-wrap"> ... </div>
<!-- This clearfix used for clearing floats between elements -->
<div class="clearfix"></div>
0 голосов
/ 19 декабря 2018

Просто удалите комментарии HTML, удалите <!-- hamara main menu и hamara main menu end -->

enter image description here

Чтобы отобразить меню на мобильном устройстве, добавьте его в CSS 

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