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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Learn to Implement Estimated Reading Time using PHP Part 1: The BasicsPHPCSS backface-visibility PropertyCSSHow to check if the page is single post page in WordPress?WordPressHow to use $INSERT command in Envision Basic?Envision BasicThe actual difference between indexOf() and search() in JavaScriptJavaScriptMySQL queries to get data rows from previous month as well as from last 30 daysSQL/MySQLSelf-Driving and Intelligent NetworksMiscellaneousModules and its Core features in JavaScriptJavaScriptWhat are Null Sessions?MiscellaneousThe 8 Golden Rules of Programming I Have Learned in My CareerMiscellaneousHow to add Local State to a Class in React?ReactPostgreSQL BETWEENPostgres