How to make fixed Heading, Paragraph or Div in WordPress
This tutorial will show you how you can make a heading, paragraph or other html elements fixed relative to the viewport or browser screen of any device.
This means, when the page is scrolled, the fixed element won’t move but stay fixed in the defined position in the viewport.
As a matter of fact, fixed element does not take position in webpage but in viewport.
This stickiness of element may be essential sometimes especially in case of Heading. When you like that one of your heading in a page should not move on scrolling but stay motionless in every point of scrolling, you can use this method. This technique can be applied to make all
img and other html elements fixed.
Fixed element can be created by using CSS property
position. In WordPress environment, take a custom HTML block in Block Editor or open Text mode in Classic Editor. Just do the followings:
- Take an html element such as
- Style the element with
- Fix the fixed position with any of
bottomand any of
Now let’s do everything practically:
Tricks and style to create fixed html element?
First take a container
width:50% as shown below:
<div style=" height:250px; width:50%; border:4px ridge black; background:aliceblue;"> </div>
Now do the followings:
div, first take a
pelement which we’re going to make fixed.
- Style the
- Below this
p, take two other
pwith adequate texts that need to be scrolled.
Look at Code
<div style=" height:250px; width:50%; overflow-y:scroll; border:4px ridge black; background:aliceblue;"> <p style=" position:fixed; top: 100px; right:0; width:100px; border:2px solid black; background:yellow;"> Fixed Paragraph</p> <p>Some text here. Some text here. Some text here. </p> <p>Some text here. Some text here. Some text here. </p> </div>
Did you notice the output? Probably you’re puzzled why
p is missing from inside the parent
position:fixed cannot retain the fixed element (
p) inside the container. Look at your browser window. Our paragraph element with text ‘Fixed Paragraph’ has taken fixed position to upper-right corner of the browser window leaving 100px from top and 0px from right as we defined.
Actually this style and tricks can be best fit with Header of a Website or page which you intend not to move over scrolling.
Hope you don’t misunderstand! Thanks!