Main Menu not aligned

LorenzoD
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
shopamapa
Shopify Partner
16 1 3

hello, what did you do before that happened?

0 Likes
LorenzoD
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
shopamapa
Shopify Partner
16 1 3

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

Do you have snapshot from before or screenshot?

 

0 Likes
LorenzoD
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
shopamapa
Shopify Partner
16 1 3

do you know CSS?

 

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

0 Likes
voreioselas
New Member
2 0 0

Hi!

My main menu shifted to the left when I tried increasing the size of the logo. It looks like it went out of the margin or something (I'm attaching a screenshot of the homepage for reference). How can I recenter everything again while maintaining the size of the logo?

 

Thank you in advance!

 

Screen Shot 2021-02-25 at 5.00.29 PM.png

0 Likes
shopamapa
Shopify Partner
16 1 3

Ok, can you post screenshot of how was it before? 

 

Also post the code before and after you changed it.

0 Likes
voreioselas
New Member
2 0 0

Hi,

I don't have a screenshot or the code of how it looked before but it was pretty much the same as the screenshot I sent on the previous message except that I was able to see every menu item.

I have this code at the end of the timber.scss:

@media screen and (min-width: 769px) {
.site-header .site-header__logo {
text-align: center;
margin: 0 auto;
width: 100%;
}
.site-header nav {
text-align: center !important;
margin: 0 auto;
}
}
 
Then I also have this at the end of theme.scss:
 

.site-header__logo img {
max-width: 400px !important;
}

@media only screen and(max-width:740px){
a.mobile-nav__link {
font-size: 17px;
}

}

@media screen and (max-width: 750px) {
.site-header .grid--table {
height: 60px;
}
}

 

Thanks in advance!

0 Likes