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 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 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
WordPress: How to setup and get values from an ACF options page?WordPressHow to switch dark and light themes using pure CSS?CSSWhat does useEffect do in React?ReactStyling Lists with CSSCSSMicroservices vs Monolithic ArchitectureMiscellaneousHow to insert Bootstrap 4 in Angular 9 app?AngularWhat are Modules and Components in Angular?Angularaddcslashes() and addslashes() String Functions in PHPPHPRevisiting variable scope in JavaScriptJavaScriptKubernetes vs. Docker? It’s a misleading phraseMiscellaneousHow to add Lifecycle Methods to a Class in React?Reactfor @each loop in SCSSSCSS