Viewed: 11264

Creating a horizontal scrolling responsive menu

Code in 5 minutes

I’ve been wondering for a while now about an alternative approach to responsive navigation. Something which doesn’t involve the ‘hamburger’ toggle icon. It’s tricky, because we aren’t afforded the same space native apps get. So if we follow the principles set by them, it can be annoying to use and get in the way.

Although I’m certainly not the first to use this idea, it has been used in early versions of the Facebook app and it’s being used on some pages on the Apple website. It’s a pattern that could be an ideal replacement for the “hamburger” menu. So in this post the aim is to create a horizontal scrolling navigation with CSS.

What we want to avoid when creating this menu

What made the ‘hamburger’ menu so successful was how discrete and easy it was just to shove away. Which in turn is why it’s was deemed unsuccessful, in terms of engagement.

Generally fixed elements

The way that Mobile Safari on iOS works is terrible for anything fixed towards the bottom of the viewport. Centralising it in the viewport to the left or right can obscure content, which in turn will be as annoying. This is something I’m still debating as there are some good examples using bottom navigation for a website.

Anything list like

A list like navigation can get in the way of the page itself. Although it’s highly accessible from the off, I think you can push the more valuable content, you would want the visitor to see initially.

Tap/click to bring you down to a menu

Simply, it is no better than the ‘hamburger’.

So why would a horizontal navigation be any better?

On touch screen devices swiping is much more natural and nicer (especially on iOS), than horizontal scrolling on a computer. You see this pattern used throughout apps and galleries. So why not navigation? The navigation is always visible, although some of the items may not, this is an advantage over hiding the navigation completely.

The implementation

The implementation is flexible to work with your layout. Whether you have it positioned by your logo, it will work. Just apply the styles, to whichever element you prefer.


The two properties that do the work here are white-space: nowrap and overflow-x: auto. You need to make sure items don’t wrap otherwise, it will behave normally and allowing scrolling using auto means scrolling will be available when necessary. This small amount of CSS will make any area have horizontal scrolling.

.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

It’s important to use the -webkit-overflow-scrolling property. On iOS devices, this makes scroll areas have momentum and ease of use. Android devices by default are easier to scroll, on the few I have tried this on. -ms-overflow-style: -ms-autohiding-scrollbar helps users on IE 10, 11 and Edge have a scrollbar to use on hover.

You can hide the scrollbar completely by targeting the ::-webkit-scrollbar pseudo element and improve the appearance further. However, from what I’ve test it can prevent scrolling on Windows, as from my own testing clicking the scrollbar and dragging horizontally is the only way to scroll (for most mice I assume). So proceed with caution I‘ll cover more on this shortly.


<header class="scroll">
  <a href="">Logo</a>
    <a href="">Blog</a>
    <a href="">Portfolio</a>
    <a href="">Downloads</a>
    <a href="">About</a>
    <a href="">Contact</a>

Depending on which area you want to scroll, you can apply the styles to the header or navigation.

Use cases

See the Pen Horizontal scroll navigation by Steve (@stevemckinney) on CodePen.

Make sure you don’t have a width set on the items

An area that may catch you out with this approach is applying a percentage width to the items. If you need to make sure something always has a percentage width, try using min-width instead. Using a percentage width always will be a percentage of the visible area rather than what overflows.

The downsides

It’s quite a simple solution in reality, although with every solution there are downsides, I’ve listed the ones I can think of below. I’ve not seen any sources testing a navigation like this, which is why I’m listing areas for concern.

Needs affordance

The affordance isn’t a massive problem. As many things require affordances. I always aim to have an item in the navigation cut off partially. Other alternatives include adding a shadow or fading the items out.

Not quite ideal if a user browses with a narrow window on Windows

Horizontal scrolling isn’t the greatest on a desktop computer (unless you have a Magic Mouse). If you’re on Windows it’s really a no go without dragging a scrollbar. The only sane method for hiding scrollbars exists for IE11 and Edge, if you want to have it behave similarly to OS X. If this is a problem for you, there is a solution.


Something I want to look at will be implementing this with Flickity. I like Flickity due to the vanilla Javascript implementation. Using this method would mean that scrollbars are hidden. Usability will be increased across all kinds of devices, due to the various ways you can interact with it.

Once Flickity is implemented, you can retain the .scroll CSS and add to that the following:

.scroll::-webkit-scrollbar {
  display: none; }

I would urge you to be careful with this and consider where it will be used most. If it’s touch screens great, however, I’ve seen that mice don’t acknowledge horizontal scrolling on Windows. So it’s certainly one to take caution with, hence why I recommend you use Flickity in combination.

Edit: I have since wrote a post that covers enhancing horizontal scrolling with flickity.

Using flexbox

You may also be interested in an alternative approach with flexbox. The main differences between using an inline-block approach versus a flex approach is the code tends to be a little tidier.

What do you think?

This is a reasonable way of displaying navigation on the basis of what you have to compete with across devices. Have you used anything like this in recent projects? I’d like to hear on twitter.

Next to read

Multiple level horizontal scrolling navigation

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design beautiful websites. You can unsubscribe anytime.

Subscriptions not currently being accepted and will return shortly.