Gravity Forms makes it very easy to add in ajax based forms that scroll to display a success or error message. Unfortunately, if you’re using a site with a fixed navigation your anchor scrolling may end with a navigation blocking your message. That’s no fun.
Luckily, Gravity forms drops in an <a> element with the class .gform_anchor that can be targeted and adjusted with a little CSS trickery.
.gform_anchor::before {
content: "";
display: block;
width: 0;
height: 50px;
margin: -50px 0 0;
}This adds a :before psuedo element into the <a> element that gives moves the anchor point up 50px.
The rule content: ""; outputs the psuedo element with nothing in it. This is necessary for the element to actually show up.
Using display: block; forces the element to be displayed as a block. But including width: 0; allows it to avoid overlapping and interfering with clicking on other elements.
Finally height: 50px and margin: -50px 0 0; essentially move the anchor point 50px above the previous location. Giving us extra space when the anchor link is scrolled to.
This helps make sure your error and success messages are properly displayed after the anchor scroll. Next you can get into some advanced techniques and add in some smooth scrolling to get rid of the jarring jump.
