Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Make the Ultimate Mobile Menu

From navigation to social media links, your mobile web design needs a place to store a lot of information. However, it's often difficult to squeeze everything into one central location on a menu. Here's how to make the ultimate mobile menu.

At this point, anyone with a website should know that making sure that website is mobile responsive is more than a suggestion -- it’s a requirement. However, issues can pop up when optimizing a website for mobile. You might struggle to maintain some elements of UX design that you love on a desktop layout. You only have so much space to work with on mobile design, and you’ve also got to include pertinent company information.

It can often feel impossible to squeeze everything you want and what your visitors actually need into one small space. It's also often tricky to get a variety of items to work together in mobile navigation. Key navigation, search, social links and your company's contact information live in a variety of places on the desktop version of your website. How to get those into one single, mobile-responsive location can seem unattainable.

One solution to those problems? Making the Ultimate Mobile Menu. This tool allows for all of your website's key mobile actions -- from search to social to looking up information -- to live in one menu. Here’s how to create one:

HTML

An intricate navigation tab calls for a fair amount of HTML.

<body>
<div class="navigation">
    <img src="https://www.solodev.com/_/images/solodev-logo-white.png">
</div>
<div id="overlay" class="overlay hidden" role="navigation" data-ps-id="0bc2bd66-545d-d7f1-3fdc-e0a9b0992c40">
    <div class="wrap box-wrap">
      <div class="mobileNav black;">            <div class="box-close box-toggle open2">
          <a href="#" class="toggle-mobile" aria-label="Menu Toggle">×</a>
        </div>
        <div class="box-mobile-menu mobile-menu">
          <div class="row">
            <div class="col">
              <h4><a href="/">Home</a></h4>
              <ul>
                <li><a href="https://www.solodev.com/product/create.stml">Product</a></li>
                <li><a href="https://www.solodev.com/pricing/">Pricing</a></li>
                <li><a href="https://www.solodev.com/resources/">Resources</a></li>
                <li><a href="https://www.solodev.com/customers/">Customers</a></li>
                <li><a href="https://www.solodev.com/blog/">Blog</a></li>
              </ul>
            </div>
            <div class="col">
              <h4><a href="/about/">About</a></h4>
              <ul>
                <li><a href="https://www.solodev.com/product/host.stml">Hosting</a></li>
                <li><a href="https://www.solodev.com/product/support.stml">Support</a></li>
                <li><a href="/about/partners.stml">Partners</a></li>
                <li><a href="https://www.solodev.com/careers/">Careers</a></li>
                <li><a href="https://www.solodev.com/contact/">Contact Us</a></li>
              </ul>
            </div>
          </div>
        </div><!--.mobile-menu-->
      <form class="search-form hidden-xs" action="/search/">
          <label for="searchBox" class="sr-only">Search</label>              
          <input id="searchBox" name="q" type="search">
          <button class="submit" type="submit" value="" aria-label="Search"><i class="fa fa-search" aria-hidden="true">&nbsp;</i></button>
        </form>
        <div class="box-social text-center">
          <ul>
            <li><a href="https://www.facebook.com/Solodev" aria-label="Facebook"><i class="fab fa-facebook-f text-white" aria-hidden="true">&nbsp;</i></a></li>
            <li><a href="https://www.linkedin.com/company/solodev" aria-label="LinkedIn" class="fab fa-linkedin-in text-white"></a></li>
            <li><a href="https://twitter.com/solodev?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" aria-label="Twitter"><i class="fab fa-twitter text-white" aria-hidden="true">&nbsp;</i></a></li>
            <li><a href="https://medium.com/@solodev" aria-label="Medium"><i class="fab fa-medium-m text-white" aria-hidden="true">&nbsp;</i></a></li>
            <li><a href="https://github.com/solodev" aria-label="Github"><i class="fab fa-github text-white" aria-hidden="true">&nbsp;</i></a></li>
          </ul>
        </div><!--.box-social-->
        <div class="box-addres">
           <p> <img src="https://www.solodev.com/_/images/solodev-logo-stacked.png" class="mx-auto d-block right-nav-logo"></p>
          <ul class="row">
          <li class="col-md-12 text-center">
              800 N. Magnolia Ave, Suite 1400<br>Orlando, FL 32803<br>Phone: 800.859.7656<br><a href="mailto:info@solodev.com">info@solodev.com</a>
          </li>
          </ul>
        </div><!--.box-addres-->
      </div>
    </div>
  <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps-scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
  </body>

CSS

CSS styles for a perfect user experience on both desktop and mobile.

body { max-width: 100%; overflow: hidden; font-family: 'Open Sans', sans-serif; } .navigation { background: #000; width: 100%; height: 90px; display: flex; align-items: center; } .navigation img { padding: 0 10px; } li { list-style: none; } ul { padding: 0; } .overlay { position: absolute; top: 0; right: 0; transform: translateX(0); transition: transform .35s ease-in-out; } .overlay.hidden { transform: translateX(100%); } .hidden .toggle-mobile:before{ content: "\f0c9"; font-family: "FontAwesome" !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: #fff; background: #000; font-size: 60px; padding-top: 15px; font-weight: 100; } .box-close a { background: #000; position: absolute; top: 0; left: -90px; height: 90px; width: 90px; color: #fff; display: block; font-size: 90px; font-weight: 100; line-height: 1; text-align: center; text-decoration: none; } .wrap .mobileNav { width: 100%; background-color: #000; padding: 20px 30px; overflow-y: scroll; } .box-wrap, .wrap .mobileNav { height: 100%; } .wrap .box-addres ul li:first-child { padding-left: 15px; } .wrap .mobile-menu h4 a { color: #d9262c; } .wrap .mobile-menu h4 a:hover { color: #d9262c; text-decoration: underline; } .box-wrap { background-color: #fff; width: 497px; } .wrap nav { width: 100%; background-color: #000; padding: 36px 58px 36px 70px; } .wrap .logo2 { text-align: center; padding-bottom: 39px; width: 100%; border-bottom: 1px solid #363636; } .wrap .logo2 a { display: inline-block; } .wrap .box-mobile-menu { width: 100%; } .wrap .mobile-menu .col-md-6:first-child { padding-left: 0; } .wrap .mobile-menu .col-md-6:last-child { padding-right: 0; padding-left: 52px; } .wrap .mobile-menu h4 { font-size: 36px; font-weight: 700; color: #d9262c; text-transform: capitalize; margin-top: 37px; } .wrap .mobile-menu ul li a { font-size: 18px; font-weight: 500; color: #fff; text-transform: capitalize; text-decoration: none; } .wrap .mobile-menu ul li a:hover { color: #0479c3; } .wrap .search-form { width: 100%; position: relative; margin-top: 30px; } .wrap .search-form input { height: 59px; width: 100%; background-color: #221f20; color: #fff; padding-left: 30px; padding-right: 57px; border: none; box-shadow: none; } .wrap .search-form button { height: 59px; width: 67px; background-color: #d9262c; position: absolute; top: 0; right: 0; border: none; } .wrap .search-form button i { font-size: 25px; font-size: 25px; color: #fff; } .wrap .search-form button:hover { background-color: #fff; } .wrap .search-form button:hover i { color: #0479c3; } .wrap .box-social { width: 100%; border-bottom: 1px solid #363636; } .wrap .box-social ul { text-align: center; margin: 20px 0; } .wrap .box-social ul li { display: inline-block; margin: 0 15px; } .wrap .box-social ul li:first-child { margin-left: 0; } .wrap .box-social ul li:last-child { margin-right: 0; } .wrap .box-social ul li a { font-size: 26px; font-size: 26px; } .fab { transition: color .25s ease-in-out; } .fab:hover{ color: #726e6e !important; } .wrap .box-addres { width: 100%; background-size: 58px 41px; margin-top: 44px; border-bottom: 1px solid #363636; padding-bottom: 31px; } .wrap .box-addres ul { list-style: none; margin-top: 33px; } .right-nav-logo { width:100px; } .wrap .box-addres ul li { font-family: "Helvetica", Arial, Verdana; font-size: 12px; font-size: 12px; font-weight: 400; color: #fff; } @media (max-width: 767px) { .box-close a { left: 0; top: -10px; z-index: 2; background: none; padding-top: 6px; } .hidden .toggle-mobile:before{ left: -90px; top: 10px; } .box-wrap { width: 100%; max-width: 497px; } .wrap .mobile-menu h4 { margin-top: 50px; } .wrap nav { margin-top: 0; padding-top: 0; } .wrap .search-form button { background-color: #221f20; height: 74px; } .wrap .search-form button:hover { background-color: #221f20; } .wrap .search-form { margin-top: 0; } .wrap .mobile-menu { border-bottom: 1px solid #363636; padding-bottom: 40px; } .wrap .search-form { padding-bottom: 40px; border-bottom: 1px solid #363636; } .wrap .search-form input { height: 74px; width: 100%; } } @media (max-width: 573px) { .wrap .search-form input { padding-left: 70px; } } @media (max-width: 479px) { .wrap .box-social ul li { margin-left: 8px; margin-right: 8px; } .wrap .box-social ul li:first-child { margin-left: 0; } .wrap .box-social ul li:last-child { margin-right: 0; } .wrap nav { padding: 0 15px 36px 15px; } }