Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap Basics Using Bootstrap Components Using ScrollSpy to Highlight Nav Links

add margin to <a href="speakers"> Tag...?


i´ve got following question, if you click e.g. "speakers" on the Navbar u´ll get to the speakers section on the side; But the <h1>Title "Speakers" with the id speakers is behind our navbar. there are some margin Problems. Is there any attribute like "target offset" for links to a section on the page? I've read something about pseudo <p> but im not sure what way to go here.

Thank you very much, greetings from Germany Patrick

Henry .
Henry .
52 Points

Is it possible to paste your issue using codepen.io or a screen shot

4 Answers

Rama Olson
Rama Olson
11,658 Points

This is common issue with fixed headers and anchor links. The anchor link takes you so the anchor is at the top of the page but if you have fixed header that header is set over the top of the page as well and hides the anchor. Lot's of ways to fix like:

:target:before {
    height:90px; /* fixed header height*/
    margin:-90px 0 0; /* negative fixed header height */

Adjust for your header height & in this case be sure to adjust the offset for scroll spy or the active links won't fire at right position.

src - https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

I'm almost certain you're referring to "data-offset".

In the below example, you'll see this attribute added to the body tag, targeting a navbar with the ID of "yourNavId". In this case, the "data-offset" attribute's value of "100" will make the scroll stop (and highlight the active link in the navbar) 100 pixels above the element it's scrolling to.

<body data-spy="scroll" data-target="#yourNavId" data-offset="100">

I hope that's what you're looking for!

im not referring to the scroll spy. The problem is much easier, its more the "<a class="nav-link" href="#speakers">Speakers</a>" /// "href="#speakers" attribute in the navbar that provides the link to the section. if you click on it u'll get to the Speakers section on the side BUT you are not able to see the Headline (<h1 class="display-4 text-center my-5 text-muted" id="speakers">Speakers</h1>) because the NAVBAR is infront/ontop of it. I'll post a picture. my question is, is there some attribute/class for acting like the "data-offset" attribute for <a> tags, so the section speakers would appear a bit lower on the side.

alt posting the picture is not working ://

Carlos Reyes
Carlos Reyes
30,056 Points

This is how my code looks like:

<a class="nav-item nav-link" href="#speakers">Speakers</a>

      <!-- speakers -->
      <h1 id="speakers" class="display-4 text-center my-5 text-muted">Speakers</h1>

Mine is working fine, it takes to the Speakers H1 Header. May I suggest to take the workshop on Markdown Basics if you have the chance.


If you can post an image, that would be the most helpful. But right now you might want to look into adding some top margins to the h1 tag. Bootstrap 4 has classes for adding margins and padding in all 4 directions, top/bottom, left/right, or on one particular side. adding the class

Check out this link on Bootstrap 4's spacing for an explanation, but adding the class "mt-3", for example, to the heading may help. The "mt" stands for Margin Top and the number after the dash from 0-5 and auto will add different spacing options.