Yogesh Chauhan's Blog

How to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?

in CSS on January 24, 2021

We can make use of overflow and white-space properties of CSS to create a horizontal scrolling menu.

CSS overflow property

We can tell browser what to do when the content overflows an element’s box using the overflow property. We can decide to clip content or to add scrollbars. If we don’t specify, browser will just add it’s value to default which is same as visible — it will show the content overflowing it’s box.

CSS white-space property

We can tell browser how to handle the white space inside a container using the white-space property.

We will use nowrap value in white-space property. It will make all sequences of whitespace collapse into a single whitespace. Text will never wrap to the next line until a br tag is encountered in the line.

Example with display:block

I’ve used SCSS in the example but it’s easy to convert it into CSS code.

Example with display:flex

We can just convert the container into flex in the example above and the menu will behave the same way. Take a look:

To be on the safe side, I have added flex-direction:row; flex-wrap:nowrap; but we can skip it and browser will keep those values as default.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Responsive Masonry Grid using CSS columns PropertyCSSForcing the domain to serve securely using HTTPSMiscellaneousWordPress: How to get field values in Advanced Custom Fields?WordPressHow to Install PHP Laravel on MacOS Catalina?PHPIN Operator in PostgreSQLPostgresPostgreSQL BETWEENPostgresAlternate Style Sheets in CSSCSSHow to add a scroll back to top button using JavaScript and CSS?CSSReverse a String in JavaScriptJavaScriptSteps to Secure a VPNMiscellaneousIntroduction to Angular modules Part 2: NgModules and componentsAngularCheck If a String Contains a Specific Word in PHPPHP