Блог

Я использовал Bootstrap для дизайна и использовал тег для меню я сделал два меню для устройств разного размера(lg и xs), все они отлично работают в соответствии с размерами экрана устройств, но ничего не видно в настройках рабочего стола мобильных браузеров. Пожалуйста, Помогите.

Вот коды заголовков:

 <header id="mad-header" class="mad-header header-3">
      <div class="mad-pre-header">
        <div class="container extra-width">
          <div class="mad-header-items hide-mobile">
            <div class="col-sm-1">
              <a href="#" class="mad-link mad-logo"><img src="public/User/images/logo2.png" alt="" width="75"></a>
            </div>
            <div class="col-sm-8 hide-mobile">
              <div class="mad-quick-links">
                <a href="#" class="mad-link blink" target="_blank">COVID-19</a><span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">MEDICINES</a> <span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">LAB TESTS</a><span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">ASK DOCTOR</a><span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">AYURVEDA</a>
              </div>
            </div>
            <div class="col-sm-3 col-xs-12 second-menu">
              <div class="mad-quick-links">
                <a href="#" class="mad-link">Login</a> <span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">Sign Up</a><span>amp;nbsp;|amp;nbsp;</span>
                <a href="#" class="mad-link">Offers</a>
              </div>
            </div>
          </div>
            <div class="hide-desktop show-mobile mob-nav">
                <div class="row text-center topmenu">
                    <div class="col-xs-2 logo-mob">
                        <div class="mobile-logo text-left">
                            <a href="#" class="mad-link mad-logo"><img src="public/User/images/logo2.png" alt="" width="75"></a>
                        </div>
                    </div>
                    <div class="col-xs-10 second-menu">
                        <div class="mad-quick-links">
                            <a href="#" class="mad-link blink" target="_blank">COVID-19</a><span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">MEDICINES</a><span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">LAB TESTS</a><span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">ASK DOCTOR</a><span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">AYURVEDA</a>
                        </div>
                    </div>
                </div>
                <div class="row mainmenu text-right">
                    <div class="col-xs-5 logo-mob" style="width:36%">
                        
                    </div>
                    <div class="col-xs-6 none-mob">
                        <div class="mad-quick-links">
                            <a href="#" class="mad-link">Login</a> <span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">Sign Up</a><span>amp;nbsp;|amp;nbsp;</span>
                            <a href="#" class="mad-link">Offers</a>
                        </div>
                    </div>
                    <div class="col-xs-1 menu-mob">
                        <nav class="mad-navigation-container text-left d-block d-sm-none show-mobile">
                            <ul class="mad-navigation mad-navigation--vertical-sm">
                                <li class="menu-item"><a href="#" class="mad-link blink" target="_blank">COVID-19</a></li>
                                <li class="menu-item"><a href="#" class="mad-link">MEDICINES</a></li>
                                <li class="menu-item"><a href="#" class="mad-link">LAB TESTS</a></li>
                                <li class="menu-item"><a href="#" class="mad-link">ASK DOCTOR</a></li>
                                <li class="menu-item"><a href="#" class="mad-link">AYURVEDA</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </header>
 

Я использовал классы «скрыть-мобильный» и «скрыть-рабочий стол» для отображения заголовка на большом экране, а также на небольших устройствах с осыпью.

Пожалуйста, помогите мне решить эту проблему. Заранее спасибо.

для этого можно использовать классы начальной загрузки ( .d-{breakpoint}-{value} for sm, md, lg, and xl. ) :

 <!-- For your mobile section : -->
<div class="mad-header-items hide-mobile d-none d-sm-block">
<!-- For your desktop section : -->
<div class="hide-desktop show-mobile mob-nav d-block d-sm-none">
 

• Вы можете найти дополнительную информацию в документе Bootstrap Doc.
• Все возможности перечислены здесь.
• И здесь перечислены все точки останова.