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

How to Make Your Sidebar Navigation Mobile Responsive

In an ever-changing tech landscape, mobile-first design remains a crucial part of effective website navigation.

One of the best design strategies you can have while developing a website is "How will this look on mobile?"

From font choices to overall page structure, going from a full-sized desktop display to a much smaller mobile screen can radically shape how your website appears to visitors. If your website visitors can't clearly navigate through your website on their phones, your organization could be losing out on business.

Mobile traffic made up nearly 53% of global online traffic in 2017. This isn't a recent trend, and people using their phones to visit websites first isn't going anywhere.

And, more often than not, your website's navigation will radically change whenever a user goes from desktop to mobile. This is certainly true for your template's sidebar navigation.

When dealing with sidebar navigation lists, you traditionally had a few options including (1) just hide the element on mobile devices or (2) show the sidebar navigational links preferably under the content. Both of these options had their pitfalls. If you hid the links, you take away a crucial navigational outlet for your users. If you show all of the links, it can get out of control if you have a number of links, causing unnecessary scrolling.

As of late, there is another design choice you can make: consolidate your sidebar links into a dropdown on mobile devices. This method provides an intuitive user experience as your sidebar links will collapse into a dropdown select box that, upon click, acts as a link.

Here's how to transform your sidebar's navigation beyond mobile-friendly and to a mobile-first, design.

HTML

Within the HTML, you can see how we set up to different sets of the sidebar links. The first is a select box that will appear on mobile and the second is what would be visible on desktop:

<div class="container">
	<div class="row">
		<div class="col-sm-12 hidden-lg hidden-md visible-sm visible-xs">
			<select id="sub-menu" name="sub-menu">
				<option value="#">Navigate to...</option>
				<option value="https://www.solodev.com/blog">Blog</option>
				<option value="https://www.solodev.com/product/create.stml">Create Your Website</option>
				<option value="https://www.solodev.com/product/host.stml">Secure Cloud Hosting</option>
				<option value="https://www.solodev.com/product/host.stml">Engage Your Audience</option>
				<option value="https://www.solodev.com/product/support.stml">Support</option>
			</select>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<aside class="sidebar col-lg-3 col-md-4 col-xs-12 mb-5">
			<div class="dynamicDiv" id="dd.0.4.0">
				<div class="sidebar-wrapper">
					<nav>
						<ul class="nolist hidden-sm hidden-xs">
							<li><a href="https://www.solodev.com/blog/">Blog</a></li>
							<li><a href="https://www.solodev.com/product/create.stml">Create Your Website</a></li>
							<li><a href="https://www.solodev.com/product/host.stml">Secure Cloud Hosting</a></li>
							<li><a href="https://www.solodev.com/product/engage.stml">Engage Your Audience</a></li>
							<li><a href="https://www.solodev.com/product/support.stml">Support</a></li>
						</ul>
					</nav>
				</div><!-- .sidebar-wrapepr -->
			</div>
		</aside>
		<div class="content col-lg-9 col-md-8 col-xs-12">
			<div class="dynamicDiv" id="dd.0.4.1"></div>
			<article>
				<div class="row">
					<div class="col-sm-12">
						<h2>Adding Mobile Responsiveness to your Sidebar Navigation</h2>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
						<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
					</div>
				</div>
			</article>
		</div>
	</div>
</div>

CSS

The CSS is fairly straightforward and just covers some contemporary styling:

body {
    font-family: Helvetica,Helvetica,Arial,sans-serif;
    font-size: 1.8rem;
    line-height: 28px;
}
.nolist {
    list-style: none;
}
.sidebar-wrapper {
	max-width: 295px;
	margin-bottom: 50px
}
@media (max-width:991px) {
	.sidebar-wrapper {
		width: 100%;
		max-width: 992px;
		margin-bottom: 0
	}
}
.sidebar-wrapper>ul li {
	font-size: 1.8rem;
	font-weight: 500
}
.sidebar-wrapper>ul>li {
	border-top: 1px solid #e9e7e7;
	font-weight: 500
}
.sidebar-wrapper nav>ul {
	font-family: Montserrat, sans-serif;
	margin-bottom: 0
}
.sidebar-wrapper nav>ul li {
	font-size: 1.8rem;
	font-weight: 500
}
.sidebar-wrapper nav>ul>li {
	border-top: 1px solid #e9e7e7;
	font-weight: 500
}
.sidebar-wrapper nav>ul>li:first-child {
	border: 0
}
.sidebar-wrapper nav>ul>li>a {
	color: #1f1a17;
	display: block;
	padding: 20px 20px
}
.sidebar-wrapper nav>ul>li>a:hover {
	color: #fff;
  background: #ed145b;
}

select#sub-menu {
    width: 100%;
    height: 55px;
    color: #000;
    margin: 15px 0;
    padding: 13px;
    border: 1px solid #333;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    text-overflow: '';
    background: url(https://raw.githubusercontent.com/solodev/mobile-sidebar-navigation/master/drop-arrow.png) right no-repeat;
}
select#sub-menu, select#sub-menu>option {
    font-family: Helvetica,Helvetica,Arial,sans-serif;
    font-size: 1.8rem;
    line-height: 28px;
}
select#sub-menu, select#sub-menu>option {
    font-family: Helvetica,Helvetica,Arial,sans-serif;
    font-size: 1.8rem;
    line-height: 28px;
}

JavaScript

Just a little bit of JavaScript is needed to handle the onclick events for the mobile dropdown box:

jQuery(document).ready(function($){ 
  $('#sub-menu').on('change', function () {
	  var url = $(this).val(); // get selected value
	  if (url) { // require a URL
		  window.location = url; // redirect
	  }
	  return false;
  });
});

And with the above code you can transform how your sidebar navigational links appear on mobile devices. Take a look at the JSFiddle below and be sure to resize your viewpoint to get the full effect of how things appear on all devices.

Download from Github

Share on Facebook Tweet It