YogeshChauhan . com

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

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

SELF JOIN in PostgresPostgresHow to catch .keypress() on body using jQuery?jQueryWhat Is a Graph Database?MiscHow to Access a Global Variable From Inside a Function in PHP?PHPthe box-sizing property in CSSCSSHow to get Current Year, Month and Date in JavaScript?JavaScriptSelf-Driving and Intelligent NetworksMiscHow to find the HCF or GCD and LCM of two given numbers using Swift?Swift$this Keyword in PHPPHPHow to add Google Static Map using ACF map field?WordPressA complete diagram with building blocks of an Angular applicationAngularLearn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQL