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

Converting Horizontal Navigation into Mobile Dropdown Menus

Responsive navigation doesn't have to be so tricky. Here's how to convert your horizontal navigation into a sleek mobile dropdown menu.

As a web designer, you know mobile responsiveness is key for any website's survival. There's over a 50 percent chance that someone came to your website from a mobile device rather than a tradtional desktop computer.

However, "mobile responsive design" is sometimes easier said than done. One of the biggest tricks to successful mobile design is ensuring that your navigation remains functional and user-friendly even if the design changes. Providing alternative means of navigation (especially within certain subsections) gets tricky on mobile design. By converting menu lists to a dropdown on mobile, you can better preserve your overall design.

HTML

Our HTML contains one navigation for desktop and a select dropdown for a great user interface on mobile.

    <div class="sectional-nav clearBoth">
	<div class="container">
	  <ul class="hidden-sm-down p-0 d-flex align-items-center justify-content-between">
		<li><a href="https://www.solodev.com/pricing/">Pricing</a></li>
		<li><a href="https://www.solodev.com/product/create.stml">Product</a></li>
		<li><a href="https://www.solodev.com/resources/">Resources</a></li>
		<li><a href="https://www.solodev.com/customers/">Customersy</a></li>
		<li><a href="https://www.solodev.com/blog/">Blog</a></li>
	  </ul> 
	</div>
	<select name="sectional_nav" id="sectional_nav" class="form-control hidden-md-up" onchange="window.location.href=this.value">
	  <option value="0">Navigate to...</option>
	  <option value="https://www.solodev.com/pricing/">Pricing</option>
	  <option value="https://www.solodev.com/product/create.stml">Product</option>
	  <option value="https://www.solodev.com/resources/">Resources</option>
	  <option value="https://www.solodev.com/customers/">Customers</option>
	  <option value="https://www.solodev.com/blog/">Blog</option>
	</select>
</div>

CSS

We use CSS here for perfect styling and alignment of the desktop navigation, and some custom styling on the select box.

body {
    font-family: 'Open Sans', sans-serif;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
    color: #fff !important;
}
select option {
  color: #000 !important;
}
select::-ms-expand {
    display: none;
}


.sectional-nav {
  background-color: #202a35;
}

.sectional-nav ul li {
  display: inline-block;
  list-style-type: none;
  text-transform: uppercase;
  margin-right: 12px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding: 15px 10px;
}
.sectional-nav ul li:first-of-type {
  padding: 30px 10px;
}
.sectional-nav ul li:hover {
  background-color: #0479c3;
  cursor: pointer;
  color: #fff;
}
.sectional-nav ul li a {
  color: #fff;
}
.sectional-nav ul li:hover a {
  color: #eeeeee;
}


@media screen and (max-width: 992px) {
  .sectional-nav ul li {
    font-size: 16px;  
  }
  .sectional-nav ul li {
    padding: 20px 5px;
  }
}

@media screen and (max-width: 767px) {
  .sectional-nav #sectional_nav {
    height: 60px;
    width: 100%;
    font-size: 18px;
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#fff' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 98% 50%;
    background-repeat: no-repeat;
  }
}

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Don't forget to adjust the browser window at a variety of sizes to see exactly how the website responds in mobile format!

Download from Github

Share on Facebook Tweet It