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

Template reference:

*You can customize and replace the "一级", "二级菜单", "多级" and "其他多级" in the code

First-level navigation bar

html:

<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>

css:

.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;
      }

Effect picture:

article picture

Secondary navigation bar

html：

!# 3@!

css:

.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;
      }

Effect picture:

First-level and second-level navigation bars

html：

!# 5@!

css:

.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;
      }

Effect picture: