如何更改Shopify独立站商城 Minimog主题导航菜单和子菜单项鼠标悬停hover时的颜色

Last Updated: 6 6 月, 2024By

我们在使用Minimog作为Shopify主题时,如果想要给导航菜单增加点特效,实现当鼠标悬停在导航菜单和子菜单项上显示指定的颜色也就是实现CSS hover效果时(如下图),应该如何实现呢?

Minimog增加导航菜单鼠标悬停颜色

Minimog截至到本文发表时的最新版并没有提供一个设置项实现该效果,需要我们手动更改主题代码,增加自定义CSS样式,步骤如下:

1.打开Shopify后台,选择“在线商店”-》找到当前模板前面的…下拉菜单(在自定义(Customize)前面);

2.在打开的下拉菜单中选择“编辑代码”;这里请注意,因为是修改minimog底层代码,为了避免修改导致的错误,请备份修改前的主题代码,方便日后恢复。

3.在打开的代码编辑界面中找到header.css文件(在“资产asset”目录下),打开文件,在文件末尾加入如下代码

.m-menu__item:hover,这里是修改一级导航菜单hover的颜色
.m-sub-menu__item:hover {这里时修改子菜单hover的颜色
background: 你想要的颜色比如”skyblue”;
}

然后保存即可。

特别注意:通过这种方式实现的效果因为是改动了主题模板的底层代码,在将来升级模板时候,会被升级后的新版本覆盖该内容,请及时备份。如果你有更好的办法,欢迎评论交流。

news via inbox

Nulla turp dis cursus. Integer liberos  euismod pretium faucibua

Leave A Comment