Yogesh Chauhan's Blog

How to create a sticky menu pin using CSS?

in CSS on February 5, 2021

Let’s add the simple HTML first. I have created links in div tag but we can have that in ul list or any other tag.

Aslo, there are additional paragraphs with ids so that it can be linked with the menu links.

Now, we are just gonna make the use of CSS position property.

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

We can use the value fixed so that the menu container can be positioned relative to the browser window.

The ‘top: 20%‘, ‘left: 0‘ and ‘position:fixed‘ will set the position of the div container. So, 20% from the top of the window, and 0 from the left.

You can choose any values like ‘top: 50%‘, ‘left: 0‘ or ‘top: 50%‘, ‘right: 0‘ or ‘bottom: 0‘, ‘left: 0‘ etc. ‘bottom:0‘ will place the container wt the bottom of the window.

Here is the CSS code:

Checkout the end result on JSFiddle


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 are Big Data Clusters in SQL Server?SQL/MySQLUseful (and probably ignored) HTML tags: Part 1HTMLbin2hex() and chr() String Functions in PHPPHPrandom function in SCSS (Sass)SCSSWhat is Hadoop and Hadoop Ecosystem?MiscellaneousIntroduction to Angular modules Part 1: NgModule metadataAngularPre-defined DatePipe format options in Angular 9AngularData Flows in ReactReactHow to Draw a Text Image using JavaScript?JavaScriptDISTINCT ON: The confusing, unique and useful feature in PostgresPostgresHow to Clone Objects in PHP?MiscellaneousCSS Attribute SelectorsCSS