YogeshChauhan . com

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Learn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to Block IPs and User Agents using code in Drupal or WordPress?Drupalbin2hex() and chr() String Functions in PHPPHPQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLSafe Practice to add Links to cross-origin destinationUI/UXClean Form Input With These PHP Functions Before Inserting into DatabasePHPHow to get the full URL of current page in PHP?PHPHow to make WordPress main stylesheet (style.css)?WordPressWordPress: How to access first and random row values from a repeater field in ACF?WordPressWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryEXISTS and NOT EXISTS in PostgresPostgresThe SQL EXISTS OperatorSQL/MySQL