{"id":29612,"date":"2025-01-29T12:01:13","date_gmt":"2025-01-29T06:01:13","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&p=29612"},"modified":"2025-01-29T16:25:01","modified_gmt":"2025-01-29T10:25:01","password":"","slug":"use-external-menu-for-navigation-in-ht-scroll-navigation-slider","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/use-external-menu-for-navigation-in-ht-scroll-navigation-slider\/","title":{"rendered":"How to Use External Menu for Navigation in HT Scroll Navigation Slider"},"content":{"rendered":"\n
\n

The External Menu for Navigation<\/strong> feature in the HT Scroll Navigation Slider<\/strong> allows users to navigate the slider by clicking on the header menu. This is useful for creating a seamless scrolling experience directly from the navigation menu.<\/p>\n\n\n\n

\n

\ud83d\udccc Related Documentation:<\/strong> How to Use Elementor Scroll Navigation Slider Widget<\/strong><\/mark><\/a><\/p>\n<\/div><\/div>\n\n\n\n

\n

Step-by-Step Guide to Enable External Menu for Navigation<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\n

Step 1: Enable External Menu for Navigation<\/h3>\n\n\n\n
<\/div>\n\n\n\n
    \n
  • Open the page with the HT Scroll Navigation Slider<\/strong> in Edit with Elementor<\/strong> mode.<\/li>\n\n\n\n
  • Select the HT Scroll Navigation Slider<\/strong> widget.<\/li>\n\n\n\n
  • Navigate to the Slider Options<\/strong> tab.<\/li>\n\n\n\n
  • Locate the External Menu for Navigation<\/strong> setting and enable it.<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n<\/div><\/div>\n\n\n\n
    \n

    Step 2: Configure the Header Menu Links<\/h3>\n\n\n\n
    <\/div>\n\n\n\n
      \n
    • Go to Appearance > Menus<\/strong> in your WordPress dashboard.<\/li>\n\n\n\n
    • Select the menu where you want to add the navigation links.<\/li>\n\n\n\n
    • Add a Custom Link<\/strong> for each slide using the format:\n
        \n
      • #htslider-scroll-slide-1<\/code> for the first slide.<\/li>\n\n\n\n
      • #htslider-scroll-slide-2<\/code> for the second slide.<\/li>\n\n\n\n
      • #htslider-scroll-slide-3<\/code> for the third slide.<\/li>\n\n\n\n
      • (Continue this pattern for additional slides.)<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Set the Navigation Label<\/strong> (e.g., “Slide 1”, “Slide 2”, etc.).<\/li>\n\n\n\n
      • Click Save Menu<\/strong>.<\/li>\n<\/ul>\n\n\n\n