Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Patrick Pankn
Patrick Pankn
1,520 Points

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

Hello,

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
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,670 Points
Rama Olson
Rama Olson
11,670 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 {
    content:"";
    display:block;
    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/

Chris Balazic
Chris Balazic
15,907 Points
Chris Balazic
Chris Balazic
15,907 Points

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!

Patrick Pankn
Patrick Pankn
1,520 Points
Patrick Pankn
Patrick Pankn
1,520 Points

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
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.

Regards,

Chris Balazic
Chris Balazic
15,907 Points
Chris Balazic
Chris Balazic
15,907 Points

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.