How to consider body margin on html anchor
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
- How to make form with two buttons submit a different value for each button?
- What is the element#createTextRange() method?
- querySelector not working in Chrome extension code
- How to insert a page break in HTML so wkhtmltopdf parses it?
- Why am I getting a ParseError?
- Next.js Redirect from / to another page
- Place a background image over an image
- Embed image in a <button> element
- Dashed border animation in css3 animation
- Automatically scroll to bottom as the page loads
- How do I determine the size of a pdf with pdf.js so I can scale to the screen size?
- HTML table colspan not showing as expected
- <button> vs. <input type="button"> -- which to use?
- Website is not scrolling horizontally on mobile
- Image on top of background-image
- Javascript code doesn't fire until the 2nd click for an html button?
- CSS - padding (or margin) not resizing the container
- Insert a getElementById inside a progress bar value=""
- CSS color vs. background-color vs. background?
- Hyperlinks within email body work in browser but not Gmail mobile app
- How to connect a file from a folder in a different branch?
- How to stylize data from mysql in php file correctly?
- Bootstrap 5 tooltip placement top issue when page has a scroll
- Body height 100% displaying vertical scrollbar
- How can I set a minimum amount of space between flexbox items?
- Set different timers in javascript to show divs
- Load inline JS after page load
- How can I achieve a curved effect at the bottom of my page without having to reset my gradient pattern?
- How can I set max-length in an HTML5 "input type=number" element?
- Overflow auto not working with justify-content: flex-end