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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
Can we execute conditions in SQL?SQL/MySQLWordPress: How to access first and random row values from a repeater field in ACF?WordPressHow to Install Xcode Command Line Tools on MacOS?MiscellaneousHow to load a module with configuration in SCSS?SCSSPre-defined DatePipe format options in Angular 9AngularWindow setTimeout() Method in JavaScriptJavaScriptHow to reprocess failed items in Etrieve Flow?MiscellaneousHow to calculate elapsed time in JavaScript?JavaScriptHow to Add, Edit and Delete a Workflow in Etrieve?MiscellaneousHow to Draw a Circle in HTML5 Using Canvas Tag?HTMLHow to show slider value in HTML5 range input using JavaScript?HTMLKubernetes vs. Docker? It’s a misleading phraseMiscellaneous