不同的桌面和移动导航栏

Question

I would to have a different desktop and mobile menu layout. My desktop menu uses dropdowns, but I would like to mobile menu to just be a vertical list without the dropdowns. I have tried creating a desktop version and a mobile version in the hope I could switch between the two, but that's where I am stuck. How do I achieve this in the CSS? - if that's the right place to do it.

desktop menu

 Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .leftcolumn, .rightcolumn { display: block; width: 100%; padding: 0; } } /* Responsive layout - when the screen is less than 600px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } 

 <div class="topnav_desktop" id="myTopnav"> <a href="index.html">Home</a> <div class="dropdown"> <button class="dropbtn">History <i class="fa fa-caret-down" ></i> </button> <div class="dropdown-content"> <a href="history.php">BSAOC</a> <a href="bsa.php">BSA Factory</a> <a href="the_star.php">The Star</a> </div> </div> <a href="the_star.php">The Star</a> <div class="dropdown"> <button class="dropbtn">Club Services <i class="fa fa-caret-down" ></i> </button> <div class="dropdown-content"> <a href="membership.php">Membership</a> <a href="machine_dating.php">Machine Dating</a> <a href="memberarea.php">Members Area</a> <a href="forum.php">Forum</a> <a href="links.php">Links</a> </div> </div> <a href="contact.php">Contact Us</a> <a href="memberarea.php" style="float:right">Login</a> <a h<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> Mobile menu <div class="topnav_mobile" id="Topnav"> <a href="index.html">Home</a> <a href="history.php">BSAOC</a> <a href="bsa.php">BSA Factory</a> <a href="the_star.php">The Star</a> <a href="the_star.php">The Star</a> <a href="membership.php">Membership</a> <a href="machine_dating.php">Machine Dating</a> <a href="memberarea.php">Members Area</a> <a href="forum.php">Forum</a> <a href="links.php">Links</a> <a href="contact.php">Contact Us</a> <a href="memberarea.php" style="float:right">Login</a> <a h<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> 

Answer 1

Add below CSS in your stylesheet will resolve your issue. Thanks

.topnav_mobile {
  display: none;
}

@media only screen and (max-width: 768px) {
  .topnav_desktop {
    display: none;
  }
  .topnav_mobile {
    display: block;
  }
}