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
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
Heading one
blah blah blah blah blah blah
Heading two
blah blah blah blah blah blah
Results in:
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!
