Shopify 商店上的 Megamenu 实施。 CSS 变得混乱

Question

我在这方面做了如下尝试。大家都可以贡献

1. 在

   https://www.cssscript.com/demo/responsive-mega-menu/

   发现了一个很棒的大型菜单，这是开放的。

2. 复制了相关的html+css和javascript。

3. 将 html + CSS 放在一个

   .liquid

   文件 (

   megamenu.liquid

   ) 中，将 javascript 放在单独的 .js 文件中 (比如，

   megamenu-liquid-support.js

   )。将

   <script src="{{ 'megamenu-liquid-support.js' | asset_url }}"> </script>

   放在megamenu.liquid
   的html末尾

4. 打开 Shopify Dawn 主题的 header.liquid 文件。

5. 注释了第 159 至 346 行，它们负责菜单的显示。

6. 在线号。 347，放置标签

   {% render 'megamenu.liquid' %}

   以将其渲染到屏幕上。到目前为止，我们正在讨论 header.liquid 中的行

7. 现在，您需要从第54行到第71行开始放置一小段代码（在

   megamenu.liquid

   中），如下所示，并注释掉第71行。 72 到 133。基本上，对其进行注释将禁用硬编码 CSS，下面的代码将实现 shopify 的链接列表菜单。还将

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.6.3/css/ionicons.min.css">

   放在 megamenu.liquid 的开头。要放置的代码如下：

8. 沃拉！您的shopify 网站上有megamenu 功能。锦上添花 - 它也可以在移动设备上使用！！！

9. 现在问题部分，在完成上述操作后，您将拥有功能菜单，因为现在 CSS 变得混乱，并且 Shopify 商店的每个页面上的字体大小等都变得很奇怪。 有什么解决方案吗。我想到了这个问题，希望有人能从中得到帮助，一些老手也可以帮助我们。

 <li class="menu-item-has-children">
        <a href="#">Category <i class="ion ion-ios-arrow-down"></i></a>
              <div class="menu-subs menu-mega menu-column-4">
                 {%- for link in section.settings.menu.links -%}
                    <div class="list-item">
                       <h4 class="title">{{ link.title | escape }}</h4>
                        <ul >
                           {%- for childlink in link.links -%}
                              <li> <a id="mega_headerMenu-{{ link.handle }}-{{ childlink.handle }}" href="{{ childlink.url }}" >{{ childlink.title | escape }} </a> </li>
                           {% endfor %}
                        </ul>
                      </div>
                {% endfor %}

                <div class="list-item">
                  <img src="<<Put image link here"  class="responsive"  width="300" height="173" alt="Shop Product">
                </div>
                 </div>
        </li>

Answer 1

更新：1 我在 megamenu.liquid 文件中注释了 html{} 标记，并且 CSS 已得到处理。现在平衡的事情是确保其他内容出现在这个新创建的megamenu下面而不是后面。让我们来看看。但现在已经可以使用了... –

更新：2 调整 .header{} 的边距就可以了。超级菜单现在正在运行。