Home Forums Porto Template Sticky sidebar offset

This topic contains 3 replies, has 2 voices, and was last updated by  jmanf47 7 months, 1 week ago. This post has been viewed 236 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #10026806



    I can’t get the sticky sidebar to go to the Heading for my different sections. when I click on a link, the page position goes about three lines down the text and not to the heading. I have increased the offset to 200 but that makes no difference.

    See the example below – instead of showing the heading “Boulders” at the top of the page, it shows the second bullet point.

    <strong>This is the section from the sidebar menu:</strong>
      <li class="nav-item"><a href="products.php">Products</a>
    	<li class="nav-item"><a href="products.php#boulders">Boulders</a></li>
    	<li class="nav-item"><a href="products.php#aggregates">Aggregates</a></li>
            <li class="nav-item"><a href="products.php#sand">Manufactured Sand</a></li>
    <strong>Here is a section of the page html for boulders:</strong>
     <div class="row">
             <div class="col-md-12">
                <h4 id="boulders">Boulders</h4>
     <div class="row">
              <div class="col-md-6">
                    <li> Reclamation of land</li>
                    <li>Ocean/water bodies barriers</li>
                    <li>Aggregate and sand factories</li>
               <div class="col-md-6">
                           <img src="img/636260012-250.jpg" width="250" height="167" />

    • This topic was modified 7 months, 2 weeks ago by  jmanf47. Reason: html didn't copy correctly on first submission
    • This topic was modified 7 months, 2 weeks ago by  Support2.


    I have tried to past the menu html showing the data-hash details, but it is not copying into the message. Please could you look at my source code.

    Many thanks.




    First add the code below in (js/custom.js):

    $(window).on('load', function() {
        if(window.location.hash) {
            if($(window.location.hash).get(0)) {
                var target = window.location.hash,
                    offset = ( $(window).width() < 768 ) ? 180 : 90;
                $('html, body').animate({
                    scrollTop: $(target).offset().top - offset
                }, 600, 'easeOutQuad', function() {

    * “180” is the offset value for mobile.
    * “90” is the offset value for desktop.
    * You can try with different values, depending the height of your menu.

    For links on the same page of context (products page for example), you should use this HTML:

    <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="200" href="#boulders">Boulders</a></li>
    <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="200" href="#aggregates">Aggregates</a></li>
    <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="200" href="#sand">Manufactured Sand</a></li>

    * Note that removed “product.php”.

    For links out context of page (locations for example), you should use in that way:

    <li class="nav-item"><a class="nav-link" href="locations.php#tuticorin">Tuticorin District</a></li>
    <li class="nav-item"><a class="nav-link" href="locations.php#taduku">Taduku, Andra Pradesh</a></li>
    <li class="nav-item"><a class="nav-link" href="locations.php#madanapally">Madanapally, Andra Pradesh</a></li>

    * Note that removed the “data-hash” and maintain the page link (locations.php).

    Please, try that and let us know if you need further assistance.

    Kind Regards,




    Hi Rodrigo

    It’s working perfectly now!

    Many, many thanks for your help.

Viewing 4 posts - 1 through 4 (of 4 total)