css - Bootstrap Nav making named links scroll under navigation bar -
this question has answer here:
i cannot figure out why bootstrap named links scroll under (behind) nav container. how can position "container" uses bottom of nav-bar top of page?
effects can seen here: https://jsfiddle.net/9azlc6sz/
<div class="navbar navbar-default navbar-fixed-top" > <div class="container" > <div class="navbar-header" > <a href="index.html" class="navbar-brand" >scroll test</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" > <span class="icon-bar" ></span> <span class="icon-bar" ></span> <span class="icon-bar" ></span> </button> </div> <div class="navbar-collapse collapse" id="navbar-main" > <!-- nav loaded via ajax, js call @ bottom of page --> <ul class="nav navbar-nav" > <li class="dropdown" > <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="sections" >sections <span class="caret" ></span></a> <ul class="dropdown-menu" aria-labelledby="sections" > <li><a href="main.html" >main</a></li> <li class="divider" ></li> <li><a href="a.html" >a</a></li> <li><a href="b.html" >b</a></li> <li><a href="c.html" >c</a></li> </ul> </li> <li class="dropdown" > <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="asec" >a <span class="caret" ></span></a> <ul class="dropdown-menu" aria-labelledby="asec" > <li><a href="a.1.html" >a started</a></li> <li><a href="a.2.html" >how a</a></li> <li><a href="a.4.html" >a process</a></li> </ul> </li> <li class="dropdown" > <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="bsec" >b <span class="caret" ></span></a> <ul class="dropdown-menu" aria-labelledby="bsec" > <li><a href="b.1.html" >b started</a></li> <li><a href="b.2.html" >create b</a></li> </ul> </li> <li class="dropdown" > <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="csec" >c <span class="caret" ></span></a> <ul class="dropdown-menu" aria-labelledby="csec" > <li><a href="c.1.html" >c overview</a></li> <li><a href="c.2.html" >c information</a></li> <li><a href="c.3.html" >c posting</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right" > <li><a href="faq.html" >faq</a></li> <li><a href="contact.html" >contact us</a></li> </ul> </div> </div> </div> <div class="container" > <div class="page-header" id="banner" > <div class="row" > <div class="col-lg-8 col-md-7 col-sm-6" > <!-- page title --> <h1>frequently asked questions</h1> <!-- page content --> <ul> <li><a href="#a" >does site promise will...?</a></li> <li><a href="#b" >should subscribe service if...?</a></li> <li><a href="#c" >how long before hear from...?</a></li> </ul> <p>in choosing answers . . . </p> <a href="#" >return top</a> <h3><a name="a" >does site promise will...?</a></h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean congue iaculis scelerisque. maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. nullam non nunc sapien. quisque vestibulum arcu quis sem pellentesque vehicula. praesent @ tortor @ justo ultrices tempus. nam volutpat feugiat sapien. aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p> <p>donec fermentum orci id nisl imperdiet pulvinar. sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. ut fringilla ullamcorper lectus @ mollis. in lobortis ac sem ut hendrerit. interdum et malesuada fames ac ante ipsum primis in faucibus. vestibulum aliquet urna ac sapien blandit ullamcorper. integer gravida, risus dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. vestibulum vitae diam ante. cras hendrerit porta diam eget dapibus. nam aliquet dolor in justo feugiat luctus. nunc sit amet condimentum nibh. pellentesque dignissim orci eros, euismod mollis turpis tempor et. in hac habitasse platea dictumst. nullam pretium fringilla urna ac rhoncus. vivamus odio dolor, sodales euismod in, consequat tempor tellus.</p> <a href="#" >return top</a> <h3><a name="b" >should subscribe service if...?</a></h3> <p>nullam non elementum ipsum. aliquam imperdiet tortor eros, nec finibus erat viverra in. nulla turpis dolor, sagittis quis mi nec, ornare viverra nisi. mauris quis aliquet metus. vestibulum pulvinar orci eget cursus aliquet. integer laoreet arcu velit. nullam ultrices ligula libero, auctor dolor feugiat a. vestibulum dolor lectus, mollis et sapien quis, porta dictum libero. sed in ante justo. cras ultricies tempor faucibus. aliquam consequat et magna non finibus.</p> <p>phasellus pulvinar urna vitae volutpat congue. vivamus non aliquam nulla. nam nulla enim, fringilla ac condimentum quis, ullamcorper tincidunt turpis. vestibulum tristique, lacus vitae placerat posuere, sapien neque sollicitudin quam, et ullamcorper libero nisl @ ipsum. sed eleifend risus leo, et sollicitudin erat faucibus et. vivamus tellus diam, mattis sit amet porta at, fermentum et lacus. sed pellentesque neque sem, cursus faucibus elit fringilla ac. nulla turpis eros, cursus ut tincidunt sit amet, vehicula bibendum dui. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; integer felis sem, sagittis ut eleifend vel, semper quis lacus. curabitur quis tortor congue, gravida urna sit amet, commodo quam. nullam id neque lorem. proin porta aliquam urna, vel auctor neque eleifend vitae. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <a href="#" >return top</a> <h3><a name="c" >how long before hear from...?</a></h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean congue iaculis scelerisque. maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. nullam non nunc sapien. quisque vestibulum arcu quis sem pellentesque vehicula. praesent @ tortor @ justo ultrices tempus. nam volutpat feugiat sapien. aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p> <p>donec fermentum orci id nisl imperdiet pulvinar. sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. ut fringilla ullamcorper lectus @ mollis. in lobortis ac sem ut hendrerit. interdum et malesuada fames ac ante ipsum primis in faucibus. vestibulum aliquet urna ac sapien blandit ullamcorper. integer gravida, risus dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. vestibulum vitae diam ante. cras hendrerit porta diam eget dapibus. nam aliquet dolor in justo feugiat luctus. nunc sit amet condimentum nibh. pellentesque dignissim orci eros, euismod mollis turpis tempor et. in hac habitasse platea dictumst. nullam pretium fringilla urna ac rhoncus. vivamus odio dolor, sodales euismod in, consequat tempor tellus. <ul> <li>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </p> <!-- // page content --> </div> <div class="col-lg-4 col-md-5 col-sm-6" > <div class="sponsor" > <!-- ads or sub-nav --> <!-- // ads or sub-nav --> </div> </div> </div> </div> <footer> <div class="row" > <div class="col-lg-12" > <ul class="list-unstyled" > <li class="pull-right" ><a href="#top" >back top</a></li> <li></li> </ul> </div> </div> </footer> </div>
darryl hein's answer in repated post works beautifully - without js.
Comments
Post a Comment