1

I am using Bootstrap4 with a nav bar with fixed-top, and made the adjustment of adding padding-top to the body tag so that the fixed-top does not obscure content. This works however, my links are just to sections on the same page and when I click on link the padding is ignored and I am taken to the wrong place, how do I resolve this.

    <body style="padding-top: 100px;">
    <header>
        <div class="container-fluid fixed-top bg-dark">
            <div>
                <div class="navbar  navbar-expand-lg navbar-dark bg-dark container">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="#webserviceSection">
                            Webservice
                        </a>
                        <a class="nav-item nav-link" href="#artistHelpSection">
                            Artist Search
                        </a>
                        <a class="nav-item nav-link" href="#releaseHelpSection">
                            Release Search
                        </a>
                        <a class="nav-item nav-link" href="#xmlSchemaSection">
                            Xml schema
                        </a>
                        <a class="nav-item nav-link" href="#searchClientSection">
                            Java Search Client
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <main>
      <div class="container" id="webserviceSection">
   ............
Paul Taylor
  • 13,411
  • 42
  • 184
  • 351
  • 1
    https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header. It may help – Praveen Murali Jun 14 '18 at 08:45
  • https://css-tricks.com/hash-tag-links-padding/ – Praveen Murali Jun 14 '18 at 08:47
  • Okay, well adding style="padding-top: 100px;" to each section div worked for me as I needed to add some padding to each section anyway. But Im suprised there was not a Bootstrap solution, the Bootstrap documentation is good but them seem to skirt around any problems – Paul Taylor Jun 14 '18 at 09:17
  • My question was a specific to finding a good Bootstrap 4 solution so at least one of those duplicate questions should be removed. It seems there was a Bootstrap specific solution for Bootstrap 3 so I wonder why they removed it. – Paul Taylor Jun 14 '18 at 09:40

0 Answers0