Main Menu not aligned

Highlighted
New Member
3 0 0

Hello guys,

I would need advice :)

 

The Main menu has misaligned and it is difficult to interact with the "Products" section as well as having moved the spacing between the individual menus.

 

URL: https://dermalogicaskincare.it/

 

How could I fix it?

 

Many thanks in advance,

 

Lorenzo

 

0 Likes
Highlighted
Shopify Partner
15 1 3

hello, what did you do before that happened?

0 Likes
Highlighted
New Member
3 0 0

Hi,

Unfortunately I didn't manage this site when it happened, so I can't give an exact answer.

They told me it looks like it happened after using an app or some code changes.

Do you know in which .liquid I could find the related code?

 

Thanks

0 Likes
Highlighted
Shopify Partner
15 1 3

that should be in header.liquid, look inside <nav> tags. 

Do you have snapshot from before or screenshot?

 

0 Likes
Highlighted
New Member
3 0 0

Hello,

I am attaching a screenshot of what the menu should look like (the sections have different names)

 

Cattura Menu1.PNG

 

 

 

The items in the "Products" submenu should drop vertically like the others.

 

Below you can see the header.liquid scheme:

 

 

<style>
  {% if section.settings.logo != blank %}
    .site-header__logo-image {
      max-width: {{ section.settings.logo_max_width }}px;
    }
  {% endif %}
</style>
<div data-section-id="{{ section.id }}" data-section-type="header-section">

    {% if section.settings.header_banner != '' %}
        <div class="header-banner"
            {% if section.settings.header_banner_color %}
            style="background-color: {{ section.settings.header_banner_color }}"
            {% endif %}>
            <div class="header-banner-content">{{ section.settings.header_banner }}</div>
        </div>
    {% endif %}
  <header class="main-header" role="banner">
    <div class="main-header-content">
        {% if template.name == 'index' %}
          <h1 itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
            <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-header__logo-image{% endif %}">
              {% if section.settings.logo != blank %}
                {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     itemprop="logo">
              {% else %}
                {{ shop.name }}
              {% endif %}
            </a>
        {% if template.name == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}

        <div class="header-cart-login">
            {% if shop.customer_accounts_enabled %}
              <ul class="header-user-menu">
                {% if customer %}
                  <li>
                    {% if customer.first_name != blank %}
                      {% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
                      {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
                    {% else %}
                      <a href="/account">{{ 'layout.customer.account' | t }}</a>
                    {% endif %}
                  </li>
                  <li>
                    {{ 'layout.customer.log_out' | t | customer_logout_link }}
                  </li>
                {% else %}
                  <li>
                    {{ 'layout.customer.log_in' | t | customer_login_link }}
                  </li>
                  <li>
                    {{ 'layout.customer.create_account' | t | customer_register_link }}
                  </li>
                {% endif %}
              </ul>
            {% endif %}

            <a href="/cart" class="cart-btn">
              {% include 'icon-cart' %}
              <p>Carrello
              <strong>{{ cart.item_count }} {{ 'layout.cart.items_count' | t: count: cart.item_count }}</strong></p>
            </a>
            
        </div>

    </div>

  </header>

    <div class="header-nav">
        <a class="header-nav-btn">{% include 'icon-hamburger' %}<span>Menu</span></a>
        <div class="header-nav-content">
            <nav role="navigation" class="main-nav">
                {% comment %}
                <ul class="site-nav">
                  {% for link in linklists[section.settings.main_linklist].links %}
                    {%- assign child_list_handle = link.title | handleize -%}
                    {% if menus[child_list_handle].links != blank %}
                      <li class="site-nav--has-submenu{% if link.active %} site-nav--active{% endif %}">
                        <a href="{{ link.url }}" class="site-nav__link">
                          {{ link.title }}
                          {% include 'icon-arrow-down' %}
                        </a>
                        <ul class="site-nav__submenu">
                          {% for childlink in menus[child_list_handle].links %}
                            <li {% if childlink.active %}class="site-nav--active"{% endif %}>
                              <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
                            </li>
                          {% endfor %}
                        </ul>
                      </li>
                    {% else %}
                      <li {% if link.active %}class="site-nav--active"{% endif %}>
                        <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
                {% endcomment %}

                {% include 'header-nav' %}

            </nav>

            <div class="search-box">
                <form action="/search" method="get" role="search">
                  <label for="Search" class="label-hidden">
                    {{ 'general.search.placeholder' | t }}
                  </label>
                  <input type="search"
                         name="q"
                         id="Search"
                         value="{{ search.terms | escape }}"
                         placeholder="Cerca">
                  <button type="submit" class="btn">
                    {% include 'icon-search' %}
                    <span class="icon-fallback-text">{{ 'general.search.submit' | t }}</span>
                  </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "range",
        "id": "logo_max_width",
        "min": 50,
        "max": 450,
        "step": 10,
        "unit": "px",
        "label": "Custom logo width",
        "default": 250
      },
      {
          "id": "header_banner",
          "type": "richtext",
          "label": "Testo banner in alto",
          "default": "<p>free shipping on all orders! no code needed.</p>"
      },
      {
          "id": "header_banner_color",
          "type": "text",
          "label": "Colore di sfondo barra"
      },
      {
        "type": "link_list",
        "id": "main_linklist",
        "label": "Menu",
        "default": "main-menu"
      }
    ]
  }
{% endschema %}

 

0 Likes
Highlighted
Shopify Partner
15 1 3

do you know CSS?

 

Try to add submenu for item "Service" in the menu and see if its gonna move.

0 Likes