How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
How to fix hash navigation with a sticky header
Problem statement: I have a sticky header and when I am clicking the table on the content link it’s scrolled to the top and hidden behind the sticky header.
Solution
use the scroll-margin-top CSS property on the section to scroll to the top with the given margin
scroll-margin-top: 20px;The table of content contains headings that need to be set on the scroll-margin-top equal to the height of the header
.blog h1,
.blog h2,
.blog h3,
.blog h4,
.blog h5 {
scroll-margin-top: 80px;
}About Author
Ashish Yadav
Software Engineer Follow
Software Engineer Follow
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
HTML5CSS3javascriptreact jsRedux.jswordpressNext jsSEOexpress js node jsmongodb
Whatsapp Group
Frontend developerwhatsapp group
