{% if categories %}
<div class="menu-wrapper">
    <div class="container">

        <nav class="navbar navbar-expand-lg franklin-navbar">

            <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#franklinMenu">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse justify-content-center" id="franklinMenu">

                <ul class="navbar-nav">

                    <!-- HOME -->
                    <li class="nav-item">
                        <a class="nav-link" href="{{ home }}">Home</a>
                    </li>

                    <!-- SHOP -->
                    <li class="nav-item mega-dropdown">
    <a class="nav-link" href="{{ shop_url }}">
        Shop
    </a>
</li>

                    <!-- ABOUT -->
                    <li class="nav-item">
                        
                        <a class="nav-link" href="{{ about_us }}">About Us</a>
                        
                    </li>

                    <!-- OUR STORY -->
                    <li class="nav-item">
    <a href="{{ our_story }}" class="nav-link">Our Story</a>
</li>

                    <!-- WELLNESS -->
                    <li class="nav-item">
    <a href="{{ wellness }}" class="nav-link">Wellness</a>
</li>


                    <!-- CONTACT -->
                    <li class="nav-item">
                        <a href="{{ contact_us }}" class="nav-link">
    Contact Us
</a>
                    </li>

                </ul>

            </div>

        </nav>

    </div>
</div>

{% endif %}