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.


amazon

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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to create a Random Hex Color generator using JavaScript?JavaScriptHow to Draw a Circle in HTML5 Using Canvas Tag?HTMLWordPress: How to display slider repeater fields in ACF?WordPressObservation of Human Behavior [Shopping Observation Example]MiscellaneousWhat is Hoisting in JavaScript?JavaScriptWhat’s a Closure in JavaScript?JavaScriptHow can one check to see if a remote file exists using PHP?PHPWhere is the PHP log file located on Mac OS?PHPSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscellaneousPHP Login System using PDO Part 1: Create User Registration PagePHPHow to use Context in React?ReactWhat is the difference between Loosely Typed Language and Strongly Typed Language?Miscellaneous