How to add CSS padding above #anchor link text

Update: Ok even I’m having trouble understanding what I wrote a few months ago… I’ll try to rewrite this for better understanding soon when I’m not super busy. Also my code is messed up cos I switched pagebuilders. Sorry.

If you’ve ever tried using anchor links, you’ve likely run into this problem before: Of the target links showing too high up, behind the main menu or something. Here’s a simple way to add some “padding” (technically margins) to the top of the anchor, to push the link and contents down below the menu.

If you’re using inline CSS:

================

Demo with standard anchor links (inspect element to view code):

<a href=”#headingone”>This is heading one</a>

<a href=”#headingtwo”>This is heading two</a>
<h3 id=”headingone”>Heading one</h3>
blah blah blah blah blah blah
<h3 id=”headingtwo”>Heading two</h3>
blah blah blah blah blah blah

This is heading one

This is heading two

Heading one

blah blah blah blah blah blah

Heading two

blah blah blah blah blah blah

===============

Adding a top space (margin) of 160px:

<a href=”#headingone”>This is heading one</a>

<a href=”#headingtwo”>This is heading two</a>
<div id=”headingone” style=”margin-top: -200px; margin-bottom: 200px;”></div>
<h3>Heading one</h3>
blah blah blah blah blah blah
<div id=”headingtwo” style=”margin-top: -200px; margin-bottom: 200px;”></div>
<h3>Heading two</h3>
blah blah blah blah blah blah

This is heading one

This is heading two

Heading one

blah blah blah blah blah blah

Heading two

blah blah blah blah blah blah

Results in:

 

This is heading three

This is heading four

Heading three

blah blah blah blah blah blah

Heading four

blah blah blah blah blah blah

===========================================================

If you’re using WPBakery Visual Composer or other page builders, and have IDs assigned to rows, and want to use custom CSS for this, simply use:

#headingone {margin-top: -160px; margin-bottom: 160px;}

So on and so forth. Good luck!

Michael

Michael

Leave a Reply

About Me

I run Pixl, a web design and development agency in Hartamas Kuala Lumpur.

This is a place for me to pen my thoughts… and sometimes sell my second-hand stuff.

Recent Posts