Aurora Mega Menu adjustments

[Lisamika]

Using the Aurora theme. 

New design not published yet.

If I have only 3 main subcategories in the mega menu, those are displayed one to the left and one in the center and one to the right. I want them more in the middle (below the menu) on desktop. 

How can I change it?

I also wish to edit font style and make it uppercase possibly.

And for mobile (and desktop) make certain menu items bold.

Thanks in advance. 

[Liquid_xPert_SJ]

Hi@Lisamika 

well this can be possible only when we have the store url or preview theme url,

[Lisamika]

It is now live at https://department.beauty

You can see in example; https://department.beauty/en/collections/mascara

There is only "Collections / Mascara" And not "Home / Make up / Eye make up / Mascara"

[Lisamika]

Can I have it so that it shows a standardized breadcrumb, and not what was last visited? 

[Liquid_xPert_SJ]

Hi@Lisamika well you need to customize the breadcrumb code and make it stabilized like you want. below is the snippet and instructions of custom breadcrumbs please follow OR let me know if you need my help.

Step 1: Accessing Your Shopify Store Back end
Step 2: Editing Your Theme Code
Step 3: Adding the Breadcrumb Section and create a section with the name custom-breadcrumb.liquid
Step 4: Save it and go to your theme customizer and add that breadcrumb section where you want it to show on any page
Below is the code.

{%- style -%}
   {% if template == 'product' and section.settings.enable_product_page  %}
     .breadcrumbs{
       display: block;
     }
     {% else %}
     .breadcrumbs{
       display: none;
     }
   {% endif %}

  {% if section.settings.enable_complete_site %}
    .breadcrumbs{
      display: block;
    }
    {% endif %}

  {% if template == 'collection' and section.settings.enable_collection_page  %}
     .breadcrumbs{
       display: block;
     }
   {% endif %}


       :root  {
         --svg_fill: {{ section.settings.breadcrumb_text_color}}
         ;
       }

       .home-icon-container {
         display: inline-block;
         margin-right: 4px;
         vertical-align: sub;
       }

       .breadcrumbs {
         padding: 1rem 5rem;
         color: {{ section.settings.breadcrumb_text_color }}
         ;
         background-color: {{ section.settings.breadcrumb_bg_color }}
       }

       .breadcrumbs li {
         display: inline-block;
       }

       .breadcrumbs a {
         text-decoration: none;
         /*Will put liquid customization here*/
         font-size: 15px;
         color: inherit;
       }


     {%- if section.settings.breadcrumb_accent_color_bool -%}
         .breadcrumbs a:last-of-type {
           color: {{ section.settings.breadcrumb_accent_color }}
            !important;
         }
       {%- endif -%}


       .breadcrumb-delimeter:not(:last-child):after {
         {%- case section.settings.breadcrumb_delimeter -%}
           {%- when "angle_right" -%}
           content: "›";
           font-size: 18px;
           {%- when "slash" -%}
           content: "/";
           font-size: 16px;
           {%- when "arrow_right" -%}
           content: "➤";
           font-size: 15px;
           {%- when "squiggle_arrow" -%}
           content: "\27FF";
           font-size: 25px;
           {%- when "right_long" -%}
           content: "\279E";
           font-size: 18px;
           transform: translateY(5%);
           {%- when "double_right" -%}
           content: "\00BB";
           font-size: 20px;
           {%- when "diamond_arrow_head" -%}
           content: "⤞";
           font-size: 25px;
           transform: translateY(5%);
           {%- when "heavy_angle_right" -%}
           content: "\276F";
           font-size: 18px;
           transform: translateY(5%);
         {%- else -%}

         {%- endcase -%}
         display: inline-block;
         margin-left: 0.75rem;
         margin-right: 0.50rem;
         speak: none;
       }

       .breadcrumbs [aria-current="page"] {
         color: inherit;
         font-weight: normal;
         text-decoration: none;
       }
{%- endstyle -%}

<div class="page-width breadcrumbs" aria-label="breadcrumbs">
  {%- unless template == 'index' or template == 'cart' -%}
    {%- if section.settings.breadcrumbs_home_icon_bool -%}
      <div class="home-icon-container">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          fill="currentColor"
          class="bi bi-house-door-fill"
          viewBox="0 0 16 16"
        >
          <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
        </svg>
      </div>
    {%- endif -%}

    <a href="/" title="Home">Home</a>
    {%- case template.name -%}
      {%- when 'article' -%}
        {%- for link in linklists['main-menu'].links -%}
          {%- if link.url == blog.url -%}
            <span class="breadcrumb-delimeter" aria-hidden="true"></span>
            <!-- Breadcrumb Delimeter -->
            {{ link.title | link_to: link.url }}
            {% break %}
          {%- endif -%}
        {%- endfor -%}
        <span class="breadcrumb-delimeter" aria-hidden="true"></span>
        <a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
      {%- when 'product' -%}
        {%- capture product_url_string -%}
        {%- for collection in product.collections -%}
          {{ collection.url }}|
        {%- endfor -%}
      {%- endcapture -%}

        {%- assign object_url_string = product_url_string | append: product.url -%}

        {%- assign object_urls = object_url_string | split: '|' -%}
        {%- capture linklist_titles_str -%}
        {%- for linklist in linklists -%}
          {{ linklist.title | handleize }}|{%- endfor -%}
      {%- endcapture -%}
        {%- assign str_size = linklist_titles_str | size | minus: 1 -%}
        {%- assign linklist_titles_str = linklist_titles_str | slice: 0, str_size -%}
        {%- assign linklist_titles = linklist_titles_str | split: '|' -%}

        {%- assign level = 1 -%}
        {%- for link in linklists['main-menu'].links -%}
          {%- assign link_handle = link.title | handle -%}
          {%- assign link_titles = link_titles | append: link.title | append: '|' -%}
          {%- assign link_urls = link_urls | append: link.url | append: '|' -%}
          {%- assign link_levels = link_levels | append: level | append: '|' -%}
          {%- assign link_parents = link_parents | append: 'main-menu' | append: '|' -%}
          {%- assign link_handles = link_handles | append: link_handle | append: '|' -%}

          {%- if linklist_titles contains link_handle -%}
            {%- for clink in linklists[link_handle].links -%}
              {%- if forloop.first == true -%}
                {%- assign level = level | plus: 1 -%}
              {%- endif -%}
              {% assign clink_handle = clink.title | handle %}
              {%- assign link_titles = link_titles | append: clink.title | append: '|' -%}
              {%- assign link_urls = link_urls | append: clink.url | append: '|' -%}
              {%- assign link_levels = link_levels | append: level | append: '|' -%}
              {%- assign link_parents = link_parents | append: link_handle | append: '|' -%}
              {%- assign handle = link.title | handleize -%}
              {%- assign link_handles = link_handles | append: clink_handle | append: '|' -%}

              {%- if linklist_titles contains clink_handle -%}
                {%- for gclink in linklists[clink_handle].links -%}
                  {%- if forloop.first == true -%}
                    {%- assign level = level | plus: 1 -%}
                  {%- endif -%}

                  {% assign gclink_handle = gclink.title | handle %}
                  {%- assign link_titles = link_titles | append: gclink.title | append: '|' -%}
                  {%- assign link_urls = link_urls | append: gclink.url | append: '|' -%}
                  {%- assign link_levels = link_levels | append: level | append: '|' -%}
                  {%- assign link_parents = link_parents | append: gclink_handle | append: '|' -%}
                  {%- assign link_handles = link_handles | append: gclink_handle | append: '|' -%}

                  {%- if forloop.last == true -%}
                    {%- assign level = level | minus: 1 -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              {%- if forloop.last == true -%}
                {%- assign level = level | minus: 1 -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endif -%}
        {%- endfor -%}

        {%- comment -%} CONVERT TO ARRAYS {%- endcomment -%}
        {%- assign str_size = link_levels | size | minus: 1 -%}
        {%- assign llevels = link_levels | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_titles | size | minus: 1 -%}
        {%- assign ltitles = link_titles | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_handles | size | minus: 1 -%}
        {%- assign lhandles = link_handles | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_parents | size | minus: 1 -%}
        {%- assign lparents = link_parents | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_urls | size | minus: 1 -%}
        {%- assign lurls = link_urls | slice: 0, str_size | split: '|' -%}

        {%- assign depth = '3' -%}
        {%- assign bc3_parent_list_handle = '' %}

        {%- for url in lurls -%}
          {%- if object_urls contains url and llevels[forloop.index0] == depth -%}
            {%- unless url == product.url or url == collection.url -%}
              {%- capture bc3 -%}
              {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
            {%- endunless -%}
            {%- assign bc3_parent_list_handle = lparents[forloop.index0] -%}
            {%- assign bc3_list_handle = lhandles[forloop.index0] -%}
            {% break %}
          {%- endif -%}
        {%- endfor -%}

        {%- assign depth = '2' -%}
        {%- assign bc2_parent_list_handle = '' %}

        {%- if bc3_parent_list_handle == '' -%}
          {%- for url in lurls -%}
            {%- if llevels[forloop.index0] == depth -%}
              {%- if object_urls contains url -%}
                {%- unless url == product.url or url == collection.url -%}
                  {%- capture bc2 -%}
                  {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
                {% endunless %}
                {%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
                {%- break -%}
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
        {%- else -%}
          {%- for list_handle in lhandles -%}
            {%- if list_handle == bc3_parent_list_handle -%}
              {% assign bc2_list_handle = list_handle %}
              {%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
              {%- assign bc2_list_title = ltitles[forloop.index0] -%}
              {%- for bc2_sibling_link in linklists[bc2_parent_list_handle].links -%}
                {%- assign bc2_sibling_title_handleized = bc2_sibling_link.title | handle -%}
                {% if bc2_sibling_title_handleized == bc2_list_handle %}
                  {%- capture bc2 -%}
                  {{ bc2_sibling_link.title | link_to: bc2_sibling_link.url, bc2_sibling_link.title }}{%- endcapture -%}
                  {% break %}
                {%- endif -%}
              {%- endfor -%}
              {% break %}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}

        {%- assign depth = depth | minus: 1 | append: '' -%}
        {%- assign bc1_parent_list_handle = '' %}

        {%- if bc2_parent_list_handle == '' -%}
          {% for url in lurls %}
            {%- if object_urls contains url and llevels[forloop.index0] == depth -%}
              {%- unless url == product.url or url == collection.url -%}
                {%- capture bc1 -%}
                {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
              {% endunless %}
              {%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

        {%- else -%}
          {%- for list_handle in lhandles -%}
            {%- if bc2_parent_list_handle == list_handle -%}
              {% assign bc1_list_handle = list_handle %}
              {%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
              {%- assign bc1_title = ltitles[forloop.index0] -%}
              {%- for bc1_sibling_link in linklists[bc1_parent_list_handle].links -%}
                {%- assign bc1_sibling_title_handleized = bc1_sibling_link.title | handle -%}
                {% if bc1_sibling_title_handleized == bc1_list_handle %}
                  {%- capture bc1 -%}
                  {{ bc1_sibling_link.title | link_to: bc1_sibling_link.url, bc1_sibling_link.title }}{%- endcapture -%}
                  {% break %}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}

        {%- if bc1 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          <!-- Breadcrumb Delimeter -->
          {{ bc1 }}
        {%- endif -%}
        {%- if bc2 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          {{ bc2 }}
        {%- endif -%}
        {%- if bc3 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          {{ bc3 }}
        {%- endif -%}

        <span class="breadcrumb-delimeter" aria-hidden="true"></span>
        <a href="{{ product.url }}">{{ product.title }}</a>
      {%- else -%}
        {% for link in linklists['main-menu'].links %}
          {% if link.child_active or link.active %}
            <span class="breadcrumb-delimeter" aria-hidden="true"></span>
            <!-- Breadcrumb delimeter -->
            <a href="{{ link.url }}">
              {{ link.title | escape }}
            </a>
            {% for clink in link.links %}
              {% if clink.child_active or clink.active %}
                <span class="breadcrumb-delimeter" aria-hidden="true"></span>
                <a href="{{ clink.url }}">
                  {{ clink.title | escape }}
                </a>
                {% for gclink in clink.links %}
                  {% if gclink.child_active or gclink.active %}
                    <span class="breadcrumb-delimeter" aria-hidden="true"></span>
                    <a href="{{ gclink.url }}">
                      {{ gclink.title | escape }}
                    </a>
                  {% endif %}
                {%- endfor -%}
              {% endif %}
            {%- endfor -%}
          {% endif %}
        {%- endfor -%}
    {%- endcase -%}
  {%- endunless -%}
</div>

<script defer>
  const breadCrumbLinks = document.querySelectorAll(".breadcrumbs a")
  const lastLink = breadCrumbLinks[breadCrumbLinks.length - 1]
                lastLink.href = "javascript&colon;void(0)"
</script>

{% schema %}
{
  "name": "Breadcrumb Navigation",
  "settings": [
    {
      "type": "header"
    },
    {
      "type": "checkbox",
      "id": "breadcrumbs_home_icon_bool",
      "label": "Use the home icon next to the Home link in the breadcrumb",
      "default": true
    },
    {
      "type": "select",
      "id": "breadcrumb_delimeter",
      "label": "Breadcrumb Delimeter Icon",
      "options": [
        {
          "value": "angle_right",
          "label": "Angle Right"
        },
        {
          "value": "slash",
          "label": "Slash"
        },
        {
          "value": "arrow_right",
          "label": "Arrow Right"
        },
        {
          "value": "squiggle_arrow",
          "label": "Squiggle Arrow"
        }, {
          "value": "right_long",
          "label": "Right Long"
        }, {
          "value": "double_right",
          "label": "Double Right"
        }, {
          "value": "diamond_arrow_head",
          "label": "Diamond Arrow Head"
        }, {
          "value": "heavy_angle_right",
          "label": "Heavy Angle Right"
        }
      ],
      "default": "angle_right"
    },
    {
      "type": "color",
      "id": "breadcrumb_bg_color",
      "label": "Background Color",
      "default": "#fff"
    }, {
      "type": "color",
      "id": "breadcrumb_text_color",
      "label": "Breadcrumb Color",
      "default": "#465076"
    },
  {
        "type": "checkbox",
        "id": "breadcrumb_accent_color_bool",
        "label": "Enable visited page color link in breadcrumb",
        "default": false
      }, {
        "type": "color",
        "id": "breadcrumb_accent_color",
        "label": "Visited Page Link Color",
        "default": "#4770db"
      },
  {
    "type":"checkbox",
    "id":"enable_product_page",
    "label":"Enable in Product Page"
  },
    {
    "type":"checkbox",
    "id":"enable_collection_page",
    "label":"Enable in Collection Page"
  },
     {
    "type":"checkbox",
    "id":"enable_complete_site",
    "label":"Enable on Complete Website",
    "default": true
  }
  ],
  "presets": [
    {
      "name": "Breadcrumb Navigation"
    }
  ]
}
{% endschema %}

[Lisamika]

I removed the "schema" thing that was there when creating the section and pasted the code.

It said "Invalid schema: setting with type="header" content is required"

So I couldn't save? Do you know how to fix?

[Liquid_xPert_SJ]

@Lisamika  where you removed the schema settings? do not remove anything from the given code.

[Liquid_xPert_SJ]

@Lisamika  i have checked the width of the menu is according to its sub categories like if you have 2 it will be in two columns if you have 3 it will be in three columns. So i suggest you to  use any image in the navigation where you have less column to look more attractive to the user. If you still want to make it more center for desktop then the design will be look a bit OFF.

[Lisamika]

I see, I cant make the dop down colum less wide? Only the text, not the "box"

[Liquid_xPert_SJ]

@Lisamikawell the change will be for the time being when you add collections later you have to modify the code again .

[Lisamika]

I see. 
 

If you check my site again,
https://department.beauty/

when I click the menu the header and menu move a bit to the right in browser as soon as I click the menu, do you know why? 

[Lisamika]

Also when I open the menu it moves to the right a bit, also a color that darken the rest of the page, I cant change that? And I don't know what it is like that 

[Liquid_xPert_SJ]

@Lisamika

OK let me check