Menu Not Visible in Mobile browsers desktop site view

Question

I used Bootstrap for design and used tag for menu, i made two menus for different size devices(lg and xs), all working fine as per screen size devices but nothing visible in Mobile Browsers desktop site option. Please Help.

Here is the header codes:

<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>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">MEDICINES</a> <span>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">LAB TESTS</a><span>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">ASK DOCTOR</a><span>&nbsp;|&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>&nbsp;|&nbsp;</span>
                <a href="#" class="mad-link">Sign Up</a><span>&nbsp;|&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>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">MEDICINES</a><span>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">LAB TESTS</a><span>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">ASK DOCTOR</a><span>&nbsp;|&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>&nbsp;|&nbsp;</span>
                            <a href="#" class="mad-link">Sign Up</a><span>&nbsp;|&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>

I used "hide-mobile" and "hide-desktop" class to display header in large screen and small scree devices as well.

Please help me to solve this. Thanks in advance.

Answer 1

you can use bootstrap classes (.d-{breakpoint}-{value} for sm, md, lg, and xl.) to do this :

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

• You can find more information on Bootstrap Doc.
• All possibilities are listed here.
• And all breakpoints are listed here.