Header

{% set bg_color = section.settings.bg_color | default("#ffffff") %}
{% set text_color = section.settings.text_color | default("#000000") %}

<header id="jw-section-{{ section.id }}" style="background-color: {{ bg_color }}; color: {{ text_color }}; padding: 15px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
    <div class="jw-container d-flex justify-content-between align-items-center">
        
        {# LOGO #}
        <div class="logo">
            {% set style_img = section.settings.logo | asset_url %} 
            {% if style_img is empty or style_img == "" %} 
                {% set style_img = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=150&q=80" %} 
            {% endif %}
            <a href="/">
                <img src="{{ style_img }}" alt="Site Logo" style="max-height: 50px;" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=150&q=80';">
            </a>
        </div>

        {# NAVIGATION #}
        {% if section.navigation %}
        <nav class="desktop-menu d-none d-lg-block">
            <ul class="d-flex list-unstyled m-0 gap-4 fontStyle7">
                {% for menu in section.navigation %}
                <li class="menu-item position-relative">
                    <a href="{{ menu.link }}" target="{{ menu.target }}" style="color: {{ text_color }}; text-decoration: none;">
                        {{ menu.label }}
                        {% if menu.children %} <i class="fa fa-angle-down ms-1"></i> {% endif %}
                    </a>
                    
                    {# DROPDOWN LEVEL 1 #}
                    {% if menu.children %}
                    <ul class="dropdown-menu list-unstyled position-absolute bg-white shadow-sm p-2" style="display: none; min-width: 150px; top: 100%;">
                        {% for submenu in menu.children %}
                        <li>
                            <a href="{{ submenu.link }}" target="{{ submenu.target }}" class="d-flex align-items-center p-2 text-dark text-decoration-none">
                                {% if submenu.icon %}
                                <img src="{{ submenu.icon }}" alt="{{ submenu.alt | default('icon') }}" class="me-2" style="width: 20px;">
                                {% endif %}
                                {{ submenu.label }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </nav>
        {% endif %}

        {# CTA BUTTON #}
        <div class="header-actions">
            {% for btn in section.settings.cta_button %}
                <a href="{{ btn.href | default('#') }}" class="btn btn-primary" style="background-color: var(--color1); color: var(--color5);">
                    {{ btn.label | default('Get Started') }}
                </a>
            {% endfor %}
        </div>

    </div>
</header>

<style>
/* Simple CSS to handle hover state for dropdowns in this sample */
.menu-item:hover .dropdown-menu {
    display: block !important;
}
</style>

{% rules %}
{
  "name": "Premium Header",
  "blocks": [
    {
      "type": "navigation"
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Site Logo"
    },
    {
      "type": "color_background",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "button",
      "id": "cta_button",
      "label": "Call to Action"
    }
  ],
  "presets": [
    {
      "blocks": [
        {
          "type": "navigation",
          "settings": {
            "links": [
              { "label": "Home", "type": "home" },
              { "label": "About", "type": "none" },
              { "label": "Services", "type": "none" }
            ]
          }
        }
      ]
    }
  ]
}
{% endrules %}