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 div, p, h, 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 div, h, or p.
• Style the element with postion:fixed.
• Fix the fixed position with any of top, bottom and any of left, right properties.

Now let’s do everything practically:

Tricks and style to create fixed html element?

First take a container div with height:250px and width:50% as shown below:

CODE

<div style="
height:250px;
width:50%;
border:4px ridge black;
background:aliceblue;"> 
</div>

OUTPUT

Now do the followings:

• Inside div, first take a p element which we’re going to make fixed.
• Style the p with position:fixed, top:100px, right:0 and width:100px.
• Below this p, take two other p with adequate texts that need to be scrolled.
• Add overflow-y:scroll with container div.

Look at Code

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>

OUTPUT

Did you notice the output? Probably you’re puzzled why p is missing from inside the parent div. Actually 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!