Home Forums Porto Template Sticky sidebar offset

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

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

    jmanf47
    Participant

    Hi

    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>
          <ul>
    	<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>
          </ul>
      </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>
     </div>
     <div class="row">
              <div class="col-md-6">
                 <ul>
                    <li> Reclamation of land</li>
                    <li>Ocean/water bodies barriers</li>
                    <li>Aggregate and sand factories</li>
                  </ul>
               </div>
               <div class="col-md-6">
                           <img src="img/636260012-250.jpg" width="250" height="167" />
               </div>
      </div>

    • This topic was modified 1 week, 6 days ago by  jmanf47. Reason: html didn't copy correctly on first submission
    • This topic was modified 1 week, 4 days ago by  Support2.
    #10026808

    jmanf47
    Participant

    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.


    #10026817

    Support2
    Keymaster

    Hello,

    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;
    
                $('body').addClass('scrolling');
    
                $('html, body').animate({
                    scrollTop: $(target).offset().top - offset
                }, 600, 'easeOutQuad', function() {
                    $('body').removeClass('scrolling');
                });
    
           }
        }
    });

    * “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,

    Rodrigo.


    #10026832

    jmanf47
    Participant

    Hi Rodrigo

    It’s working perfectly now!

    Many, many thanks for your help.


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