Complete Tutorial to Change Navigation Menu

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a class='link' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <svg viewBox='0 0 24 24'>...</svg>
    
    <!--[ 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 ]-->
    <svg viewBox='0 0 24 24'>...</svg>
    
    <!--[ Title navigation ]-->
    <span class='name'>Sub menu</span>
    
    <svg viewBox='0 0 24 24'>...</svg>
  </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>

<!--[ Dropdown style 2 ]-->
<li class='dropDown more'>
  <input checked='checked' class='dropMenu hidden' id='offdropMenu2' name='dropDown' type='checkbox'/>
  <label class='link' for='offdropMenu2'>
      
    <!--[ Title navigation ]-->
    <span class='name'>More...</span>
    
    <svg class='line drop' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
    <li itemprop='name'><a class='new' href='#' itemprop='url'>Sub menu 02</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
  </ul>
</li>

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a class='link' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <svg viewBox='0 0 24 24'>...</svg>
    
    <!--[ 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 ]-->
    <svg viewBox='0 0 24 24'>...</svg>
    
    <!--[ Title navigation ]-->
    <span class='name'>Sub menu</span>
    
    <svg viewBox='0 0 24 24'>...</svg>
  </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>

<!--[ Dropdown style 2 ]-->
<li class='dropDown more'>
  <input checked='checked' class='dropMenu hidden' id='offdropMenu2' name='dropDown' type='checkbox'/>
  <label class='link' for='offdropMenu2'>
      
    <!--[ Title navigation ]-->
    <span class='name'>More...</span>
    
    <svg class='line drop' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
    <li itemprop='name'><a class='new' href='#' itemprop='url'>Sub menu 02</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</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 &quot;p/page_name.html&quot;'

<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!'}

<b:elseif cond='data:link.name == &quot;Privacy&quot;'/>
<!--[ Privacy icon ]-->
<svg viewBox='0 0 24 24'><path class='c-2' d='M100.32363,261.8039h-.37v-2.45a4.63,4.63,0,0,0-9.26,0v2.45h-.37a5.00181,5.00181,0,0,0-5,5v2.92a5.00181,5.00181,0,0,0,5,5h10a5.00181,5.00181,0,0,0,5-5v-2.92A5.00181,5.00181,0,0,0,100.32363,261.8039Zm-8.13-2.45a3.13,3.13,0,0,1,6.26,0v2.45h-6.26Z' transform='translate(-83.32363 -252.72389)'/><path class='c-1' d='M98.793,268.27387a.74893.74893,0,0,1-.75.75H92.60311a.75.75,0,0,1,0-1.5H98.043A.7427.7427,0,0,1,98.793,268.27387Z' transform='translate(-83.32363 -252.72389)'/></svg>

<b:elseif cond='data:link.name == &quot;Pinterest&quot;'/>
<!--[ Pinterest icon ]-->
<svg class='c-1' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26a12,12,0,0,1-3.81-.63l1.2-4.81A7.93,7.93,0,0,0,16,23a8.36,8.36,0,0,0,1.4-.12,8,8,0,1,0-9.27-6.49,1,1,0,0,0,2-.35,6,6,0,1,1,3.79,4.56L15,16.24A1,1,0,1,0,13,15.76l-2.7,10.81A12,12,0,1,1,16,28Z'/></svg>