给一级导航设置hot标
在Snippets/header-desktop-nav.liquid中设置以下代码
设置某些一级导航高亮显示(导航设置红色并加hot标) 代码中是给第三个、第六个、第十个设置hot标签并高亮显示
{%- if forloop.index==3 or forloop.index==6 or forloop.index==10 -%}
<span class="hotTag">hot</span>
{%- endif -%}
如果设置第一个和第二则改成
forloop.index==1 or forloop.index==2
在theme.scss.liquid中设置css代码
设置第几个导航把nth-of-type( )括号中的数字改成第几个即可
// 设置第三个导航红色加粗
.site-nav>li:nth-of-type(3)>a{color:red;font-weight:bold;position:relative}
.hotTag::after {
position: absolute;
top: 95%;
left: 5px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 5px 4px 0 4px;
border-color: #f35b6e transparent transparent transparent;
}
.hotTag {
position: absolute;
padding: 0 6px .5px;
left: 10px;
top: -15px;
color: #fff;
background-color: #f35b6e;
line-height: 15px;
height: 15px;
font-size: 10px;
white-space: nowrap;
}