Hello again,
I'm facing an other issue : I want to change my menu title color on a specific page.
Here's what I tried :
{%- if section.settings.velamenu_enable -%}
<section id="velaMegamenu" class="velaMegamenu">
{%- if page.handle == 'contact-us-1' or page.handle == 'faq' -%}<nav class="velaMegamenu2">
{%- else -%}
<nav class="menuContainer">
<ul class="nav hidden-xs hidden-sm">
{%- for velaLink in linklists[section.settings.velamenu_linklist].links -%}
{%- assign isMega = false -%}
{%- for block in section.blocks -%}
{%- assign menuItem = velaLink.title -%}
{%- if block.settings.velamenu_item contains menuItem -%}
{% include 'vela-megamenu' %}
{% assign isMega = true %}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- if isMega == false -%}
{%- if velaLink.links != blank -%}
{% comment %}====== MENU DROPDOWN LEVEL I ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink.active %} active{% endif %}">
<a href="{{ velaLink.url }}" title="{{ velaLink.title }}">
<span>{{ velaLink.title }}</span>
</a>
<ul class="menuDropdown">
{%- for velaLink1 in velaLink.links -%}
{%- if velaLink1.links != blank -%}
{% comment %}====== MENU DROPDOWN LEVEL II ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink1.active %} active{% endif %}">
<a href="{{ velaLink1.url }}" title=""><span>{{ velaLink1.title }}</span></a>
<ul class="menuDropdown">
{%- for velaLink2 in velaLink1.links -%}
{%- if velaLink2.links != blank -%}
{% comment %}====== MENU DROPDOWN LEVEL III ======{% endcomment %}
<li class="hasMenuDropdown{% if velaLink2.active %} active{% endif %}">
<a href="{{ velaLink2.url }}" title=""><span>{{ velaLink2.title }}</span></a>
<ul class="menuDropdown">
{%- for velaLink3 in velaLink2.links -%}
<li class="{% if velaLink3.active %}active{% endif %}">
<a href="{{ velaLink3.url }}" title=""><span>{{ velaLink3.title }}</span></a>
</li>
{%- endfor -%}
</ul>
</li>
{%- else -%}
<li class="{% if velaLink2.active %}active{% endif %}">
<a href="{{ velaLink2.url }}" title=""><span>{{ velaLink2.title }}</span></a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</li>
{%- else -%}
<li class="{% if velaLink1.active %}active{% endif %}">
<a href="{{ velaLink1.url }}" title=""><span>{{ velaLink1.title }}</span></a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</li>
{%- else -%}
<li class="{% if velaLink.active %}active{% endif %}">
<a href="{{ velaLink.url }}" title="">
<span>{{ velaLink.title }}</span>
{%- if settings[labelItem] != blank -%}
<span class="{%- if settings[selectItem] == 'yes' -%}textNew{%- else -%}textHot{%- endif -%}"> {{ settings[labelItem] }}</span>
{%- endif -%}
</a>
</li>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</ul>
</nav>
</nav>
{%- endif -%}
</section>
{%- endif -%}
In the vela-header-menu.liquid snippets
and :
.velaMegamenu2{
.menuContainer {
position: relative;
min-widh: 600px !important;
width: auto;
}
.nav{
>li{
> a {
color: #000000;
}
}
}
}
in the
vela-site.scss.liquid
I can't figure where to insert that code ( {%-if ), once it works on the pages I wanna change but messes with all the other pages, once the menu completely disapears...
I'd like to understand what I'm doing wrong here, as it worked out for the header logo before..
Could you help me with this ?
Thank you for reading.
