Jump to content

Needing to add spacing on all page anchor links


Recommended Posts

Hello,

 

I'm in need to alter the "landing"/on click position of all the sites page anchor links (<a name="name-here">). I have a sticky menu that cover the titles of the section being linked to. I was initially trying to style the "a name" but I'm not sure it that's possible.

 

So, if I were to have:

 

<a name="page-title"></a>

<h2>Title of Section Ect.</h2>

<p>Information about this sections and da, da, da....</p>

 

 

<a name="page-title2"></a>

<h2>Another Title of Section Ect.</h2>

<p>Some more Information about this sections and da, da, da....</p>

 

I'm wondering if I can do something in CSS to cover all "name." I'm able to add spacing to the top/before using:

 

a[name]:before {
content:"";
display:block;
margin-top: 75px;
}

 

...but then I'm just adding a fat gap before each section and it looks bad.

 

I can't go through and add an id and/class to all these links, it's just not possible at this point.

 

Hope this makes sense.

 

Any help and/or suggestions are greatly welcome.

 

Thanks in advance!

m@

Edited by m_hutchins
Link to post
Share on other sites

You risk targeting anchor elements with a name attribute in future, if the name attribute value start with 'page-title' as in name="page-title" or name="page-title2" then you could use a[name^=page-title], else give them a specific class name to target more specifically to prevent such problems totally.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...