Anchor links – When you click items on the menu, it will jump to the corresponding position on the current page or another page.

Suppose

• We have 2 pages: Home, Contact
• Home page, there are 3 sections: About, Services, Pricing.

Problem:

Header Menu includes: Home, About, Services, Pricing, Contact

• On the homepage, when clicking “About” or “Services” or “Pricing” >> the browser needs to go to the corresponding section on current page.
• On the contact page, the browser also needs to navigate to the corresponding section, on the home page.

How to do:

1. Insert ID

Add Code Blocks > Insert the 3 corresponding IDs into 3 sections on the homepage.

For About section

<span id="about"></span>

For Services section

<span id="services"></span>

For Pricing section

<span id="pricing"></span>

2. Add anchor links to Navigation

Add 3 Link Items

and use this format.

/home#about

/home#services

/home#pricing

You will have.

Save. Done!

3. Fix some issues

(Mobile) Menu will not close automatically after clicking the anchor link

Add this code to Home > Settings > Advanced > Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-menu-nav-item a').click(function(){
    $('body').removeClass('header--menu-open');
    $('button.header-burger-btn.burger').click();
  });
})
</script>

Smooth Scrolling

Add this code to Home > Design > Custom CSS

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

Notes: this code doesn’t support Safari

Add this code to Home > Settings > Advanced > Code Injection > Footer

(Code from W3schools)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

 

(Mobile) Sticky Header after clicking Anchor Links

You can edit Site Header > Style > Enable: Fixed Position

You can also use these code 😀

Add this to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(window).scroll(function() {
    var height = jQuery(window).scrollTop();
    if(height > 60) {
        jQuery('body').addClass('fixed-header');
    } else {
      jQuery('body').removeClass('fixed-header');
    }
});
</script>

and add this to Home > Design > Custom CSS

.fixed-header header#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

(Mobile) Sticky Only Burger icon when clicking anchor links

Add this code to Home > Design > Custom CSS

body.fixed-header .header-announcement-bar-wrapper #site-title {
    display: none
}

body.fixed-header .header-announcement-bar-wrapper {
    transform: translatey(0) !important;
    background-color: transparent !important
}
body.fixed-header .header-title-logo {visibility: hidden !important;}