Complete Guide to Change Navigation Menu

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a class='link' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='message-icon'>
    
    <!--[ Title navigation ]-->
    <span class='name' itemprop='name'>Contact</span>
  </a>
</li>

<!--[ Dropdown style 1 with checked atribut ]-->
<li class='dropDown'>
  <input class='dropMenu hidden' id='offdropMenu1' name='dropDown' type='checkbox'/>
  <label class='link' for='offdropMenu1'>
    <!--[ Icon ]-->
    <b:include name='folder-icon'>
    
    <!--[ Title navigation ]-->
    <span class='name'>Sub menu</span>
    
    <b:include name='arow-down-icon'>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 02</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 04</a></li>
  </ul>
</li>

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a class='link' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='message-icon'>
    
    <!--[ Title navigation ]-->
    <span class='name' itemprop='name'>Contact</span>
  </a>
</li>

<!--[ Dropdown style 1 with checked atribut ]-->
<li class='dropDown'>
  <input class='dropMenu hidden' id='offdropMenu1' name='dropDown' type='checkbox'/>
  <label class='link' for='offdropMenu1'>
    <!--[ Icon ]-->
    <b:include name='folder-icon'>
    
    <!--[ Title navigation ]-->
    <span class='name'>Sub menu</span>
    
    <b:include name='arow-down-icon'>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 02</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 04</a></li>
  </ul>
</li>

<!--[ Icon ]-->
<svg viewBox='0 0 24 24'><path class='c-2' d='M105.28537,261.7035v6a5.00181,5.00181,0,0,1-5,5h-10a4.99541,4.99541,0,0,1-5-5v-6a4.99541,4.99541,0,0,1,5-5h10A5.00181,5.00181,0,0,1,105.28537,261.7035Z' opacity='0.4' transform='translate(-83.28537 -252.7035)'/><path class='c-1' d='M100.85128,262.43132l-1.02.79a7.418,7.418,0,0,1-9.05,0l-1.08-.83a.76187.76187,0,0,1-.13995-1.06.74707.74707,0,0,1,1.05-.13l1.08.83a5.91258,5.91258,0,0,0,7.22,0l1.03-.79a.73992.73992,0,0,1,1.05.14A.751.751,0,0,1,100.85128,262.43132Z' transform='translate(-83.28537 -252.7035)'/></svg>

your_domain.com/p/page_name.html

expr:href='data:blog.homepageUrl.canonical path "p/page_name.html"'

<li itemprop='name'><a class='new' expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Travel&quot;' itemprop='url'>Travel</a></li>
<li itemprop='name'><a class='free' expr:href='data:blog.homepageUrl.canonical path &quot;search/label/Download&quot;' itemprop='url'>Download</a></li>

.free:after, .new:after{content:'Free!';color:var(--link-color);font-size:85%;font-weight:400;margin-left:5px} .new:after{content:'New!'}

<!--[ Lock icon ]-->
<b:elseif cond='data:link.name == &quot;Privacy&quot;'/>
<b:include name='lock-icon'>

<b:elseif cond='data:link.name == &quot;Pinterest&quot;'/>
<b:include name='pinterest-icon'>