Click Settings->Individuation->Header navigation, select "Codeblocks Configuration", which supports code embedding of HTML and CSS, compatible with both PC and Mobile.
* "Form Configuration" and "Codeblocks Configuration" cannot be used at the same time.
*After using the code block to customize, text color and text selection color settings on the left will be void.
*This feature is only available in the paid version.
PC
Mobile
*You can customize and replace the "一级", "二级菜单", "多级" and "其他多级" in the code
<ul class="custom-nav">
<li>
<a href="https://www.helplook.net/" target="_blank">一级</a>
</li>
<li>
<a href="https://www.helplook.net/" target="_blank">一级</a>
</li>
<li>
<a href="https://www.helplook.net/" target="_blank">一级</a>
</li>
<li>
<a href="https://www.helplook.net/" target="_blank">一级</a>
</li>
</ul>
.hl-custom-nav {
height: 100%;
color: #000000;
}
.custom-nav {
display: flex;
position: absolute;
top: 0;
right: 0;
z-index: 100;
margin: 0 auto;
}
.custom-nav ul,
.custom-nav li {
padding: 0;
margin: 0;
}
.hl-custom-nav li {
list-style-type: none;
width: 90px;
}
.custom-nav li a {
display: block;
text-align: center;
text-decoration: none;
}
.custom-nav > li a {
height: 65px;
line-height: 65px;
}
.custom-nav ul li a {
font-size: 14px;
font-weight: normal;
}
.custom-nav li:hover > a {
color: #0761e7;
}
!# 3@!
.hl-custom-nav {
height: 100%;
color: #000000;
}
.custom-nav {
display: flex;
position: absolute;
top: 0;
right: 0;
z-index: 100;
margin: 0 auto;
}
.custom-nav ul,
.custom-nav li {
padding: 0;
margin: 0;
}
.hl-custom-nav li {
list-style-type: none;
width: 110px;
}
.custom-nav li a {
display: block;
text-align: center;
text-decoration: none;
}
.custom-nav > li a {
height: 65px;
line-height: 65px;
}
.custom-nav > li ul a {
height: 50px;
line-height: 50px;
}
.custom-nav > li ul {
background-color: #fff;
}
.custom-nav li ul {
visibility: hidden;
position: absolute;
top: 60px;
}
.custom-nav ul li a {
font-size: 14px;
font-weight: normal;
}
.custom-nav li:hover > a {
color: #0761e7;
}
.custom-nav > li:hover ul {
visibility: visible;
box-shadow: 0 0 0 0px #dcdfe6 inset;
}
.hl-custom-nav .diff-child {
display: flex;
flex-wrap: wrap;
width: 250px;
}
.hl-custom-nav .diff-child li {
margin-right: 12px;
}
!# 5@!
.hl-custom-nav {
height: 100%;
color: #000000;
}
.custom-nav {
display: flex;
position: absolute;
top: 0;
right: 0;
z-index: 100;
margin: 0 auto;
}
.custom-nav ul,
.custom-nav li {
padding: 0;
margin: 0;
}
.hl-custom-nav li {
list-style-type: none;
width: 110px;
}
.custom-nav li a {
display: block;
text-align: center;
text-decoration: none;
}
.custom-nav > li a {
height: 65px;
line-height: 65px;
}
.custom-nav > li ul a {
height: 50px;
line-height: 50px;
}
.custom-nav > li ul {
background-color: #fff;
}
.custom-nav li ul {
visibility: hidden;
position: absolute;
top: 60px;
}
.custom-nav ul li a {
font-size: 14px;
font-weight: normal;
}
.custom-nav li:hover > a {
color: #0761e7;
}
.custom-nav > li:hover ul {
visibility: visible;
box-shadow: 0 0 0 0px #dcdfe6 inset;
}
.hl-custom-nav .diff-child {
display: flex;
flex-wrap: wrap;
width: 250px;
}
.hl-custom-nav .diff-child li {
margin-right: 12px;
}