Create a Horizontal Scroll Menu using CSS

With more and more Internet users now using Mobile phones to access websites, the need for a Mobile-friendly user interface is the most right now.

We have struggled to make our user interface mobile-friendly whenever we introduce any new custom component to our website, like the sub-navigation bar showing the new tutorials(see above).

It looks like this on a desktop or a widescreen device:

But on a mobile device, it used to stack within the given width, which was very poor for a mobile-friendly user interface.

So we decided to make this menu horizontally scrollable, that way, whenever a user opens up our website on a mobile device, he/she will see a horizontally scrollable menu which is a very common experience for mobile phones. The end result was this:

Making Horizontal Scrollable Menu

We can make this happen using CSS and that too very little CSS. This is the CSS code, you must apply to the HTML element holding the elements which you want to be horizontally scrollable:

HTML Code:

<div class="hscroll">
  <a href="/javascript">Javascript</a>
  <a href="/spring-boot">Spring Boot</a>
  <a href="/tkinter">Tkinter</a>
  ...
</div>

CSS Code:

.hscroll{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Your HTML code can be anything, all you have to do is use the above CSS property and make your element horizontally scrollable.

This technique is very useful when you have a navigation bar like in our case, or any post suggestion cards at the end of a blog post, that can also be made horizontally scrollable for mobile.

If you know any better way of doing this, then do share with us by posting in the comment section.

---