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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
What’s a Web Storage API in JavaScript?JavaScriptA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLHow to add onclick event to html elements dynamically using JavaScript?JavaScriptHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresHow to use $INSERT command in Envision Basic?Envision BasicHow to retrieve homepage URL in WordPress?WordPressHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptSolution to “TypeError: ‘x’ is not iterable” in Angular 9AngularHow to update database configurations in WordPress?WordPressAdd animation to your skills bar using CSSCSSHow to remove the Gutenberg Block Library CSS from WordPress?WordPressLEFT JOIN in PostgresPostgres