How can i add 2 columns under brands only on drop down menu Premium Cigars. Debut theme

Store Design
,

Topic summary

A Shopify store owner using the Debut theme wants to create a two-column layout specifically for the “Brands” section within their “Premium Cigars” dropdown menu.

Initial Solution Proposed:

  • Edit header.liquid to modify submenu structure with nested list items
  • Add custom CSS to base.css file to create flex columns with specific styling for .site-nav__dropdown--columns, .site-nav__column, and .site-nav__column-title

Implementation Issue:

  • Store owner reports they don’t have a base.css file in their theme
  • The li class structure only appears in their mobile-nav code, not in the desktop navigation
  • Provided code snippet shows mobile navigation structure, which differs from the desktop menu structure needed for the customization

Current Status:
The discussion remains unresolved. The proposed solution doesn’t match the store’s actual theme file structure, requiring either:

  • Identification of the correct CSS file for the Debut theme
  • Alternative approach for modifying desktop navigation specifically
  • Clarification on where desktop menu styles are located in this particular Debut theme setup
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

How can i add 2 columns under brands only on drop down menu Premium Cigars. Debut theme

Store is

www.shopcigarsnow.com

pass: absolute

Screen Shot 2023-07-26 at 8.34.15 PM.png
Screen Shot 2023-07-26 at 8.34.15 PM.png2786Ă—1472 329 KB

Thanks in advance

1 Like
2

Hello @shopcigarsnow ,

You can try to follow these steps:

Go to Online Store → themes → actions → edit code

Go to header.liquid file

Modify the submenu items code like this

- Premium Cigars
  

      - Brands
      

            - Brand 1

            - Brand 2
        
      
    

      -

Go to Assets folder → base.css file → add this following code at the bottom of page

.site-nav__dropdown--columns {
  display: flex;
  justify-content: space-between;
}

.site-nav__column {
  flex: 1;
  padding: 0 10px;
}

.site-nav__column-title {
  font-weight: bold;
}

Save and preview

Hope this can help.

Transcy

1 Like
3

Hello,

Thank you for the response. But I dont have a base.css file an also the li class only appears as mobile-nav.

  • {% if link.links != blank %} {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %} {{ link.title | escape }}
    {% include 'icon-chevron-right' %}
    • {{- link.title }} {{ 'layout.navigation.menu' | t -}}
    • {% include 'icon-chevron-left' %}
      {{ link.title | escape }}

      • {% for childlink in link.links %}

    • {% if childlink.links != blank %} {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %} {{ childlink.title | escape }}
      {% include 'icon-chevron-right' %}
      {% else %} {{ childlink.title | escape }} {% endif %}
      • {% endfor %}
    {% else %}

    I couldnt change anything.