How to Create a Menu Combining a Landing Page with Additional Tabs?

In some cases, you might need to configure the menu on your website to combine the functionality of a Landing Page (a single-page website) with additional tabs. Below, you’ll find a detailed step-by-step guide on how to achieve this.

1. Adding Tabs to the Menu

First, you need to create all the tabs you want to include in the menu. To do this, go to Website > List of Pages.

Assign a unique identifier to each section by adding the # symbol before the name in the URL Address field. This way, each section will have its own ID, allowing precise navigation to it from the menu.

2. Configuring the Landing Page

In the main tab that will serve as your Landing Page, add additional sections and then assign the appropriate links to them using their IDs.

3. Adding Separate Tabs

If you want your menu to include additional pages outside of the Landing Page, add them by going again to Website > List of Pages. In this case, you don’t need to use identifiers (e.g., #section) in the URL Address field.

4. Configuring the Menu for Mobile Devices

To ensure the menu works correctly on mobile devices and automatically collapses after a click, add the following code to the custom.js file. Navigate to Settings > For Developers to do this.

$(document).ready(function() {
    $('.navbar-collapse .navbar-nav .nav-item').on('click', function() {
        $('#navbarNav').removeClass('show');
    });
});

By following the steps above, you will create a functional and visually appealing menu tailored to your needs on both desktop and mobile devices.