How to Edit Navigation Menu

Customize the navigation menu after installing the theme to create a more professional site.

The navigation menu is available in two versions, namely the default menu with additional dropdowns and an alternative menu without dropdowns, the default menu can only be edited via Edit HTML.

1. Go to Blogger HTML Editor.
2. Find the HTML000 widget, click icon for quick search.

Table of Contents

Standard menu

In the navigation widget you will find code similar to below:

<li>
  <a class="a" href="#!" itemprop="url">
    <!--[ Icon ]-->
    <b:include name="profiles-icon" />
    <!--[ Title navigation ]-->
    <span class="n" itemprop="name">About</span>
  </a>
</li>

Information:

1. Change the attribute value with your destination link.
2. Add SVG icon, See all collections
3. Replace the word/sentence for the link title.

Dropdown menu

If necessary, such as for writing one or more categories, you can add one or more dropdown menus in the navigation, the code for dropdown is similar to the code below:

<li class="drp">
  <input checked="" class="drpI hidden" id="drpDwn-1" name="drpDwn" type="checkbox" />
  <label class="a" for="drpDwn-1">
    <!--[ Icon ]-->
    <b:include name="folder-icon" />
    <!--[ Title navigation ]-->
    <span class="n new">Menu</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <!-- [ without icon ] -->
    <li class="m" data-text="Without Icon" 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>
    <!-- [ with icon ] -->
    <li class="i m" data-text="With Icon" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #04</span>
      </a>
    </li>
    <li class="i" itemprop="name">
      <a href="#!" itemprop="url">
        <b:include name="folder-icon" /> <span>Sub menu #05</span>
      </a>
    </li>
  </ul>
</li>

Information:

1. Add the checked='' attribute to open the default dropdown.
2. Add a unique dropdown ID (you can use the number at the end), and make sure the ID in the input tag and the for attribute in the label tag are the same.
3. Remove/replace code to add icon.
4. Change the words/sentences to change the dropdown title.
5. Change the attribute value as a caption/sub-menu title
6. destination link from sub-menu.
7. Customize the title for the sub-menu link.

<li class="drp mr br">
  <input checked="" class="drpI hidden" id="drpMr-2" name="drpDwn" type="checkbox" />
  <label class="a" for="drpMr-2">
    <!--[ Title navigation ]-->
    <span class="n">More..</span>
    <b:include name="arow-down-icon" />
  </label>
  <ul>
    <li itemprop="name"><a href="#!" itemprop="url">ShortLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">SafeLink</a></li>
    <li itemprop="name"><a href="#!" itemprop="url">Try RTL Mode</a></li>
  </ul>
</li>

Information:

1. className for dropdown style 2.
2. className to add a bottom border (as a menu divider).
3. Add the checked='' attribute to open the default dropdown.
4. Add a unique dropdown ID (you can use the number at the end), and make sure the ID in the input tag and the for attribute in the label tag are the same.
5. Change the words/sentences to change the dropdown title.
6. destination link from sub-menu.
7. Customize the title for the sub-menu link.

Alternative menu (Edit Through the Blogger Layout)

Pros:

1. Can be edited from the Blogger Layout.
2. Easily change page title and url.

Cons:

1. No dropdown.
2. No divider line.
3. Can't change the icon.

This menu is more suitable for users who cannot edit HTML, users don't need to bother to open the Blogger HTML Editor to edit the navigation menu.

1. On the Blogger dashboard, click Layout.
2. Find a widget named Main Menu, click icon on the widget.
3. Press the switch button on Show this widget.
4. Click Save and the default navigation widget will be hidden.
5. Next, edit the Main Menu (alternative) widget and activate it by pressing the Show this widget switch button.
6. Edit the list of links in the widget, you can delete, add or change the menu order.

Faq:

How to add a new dropdown menu?

You can directly copy the Dropdown navigation code above and paste it on a new line, the correct placement is like the following example:

<!--[ Standard menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!-- new menu here -->

How to change icons?

Icons can be changed by replacing the line of code marked with <!--[ icon ]--> or in the example above is the <b:include name='folder-icon'/> tag, all SVG icons will be automatically converted to dimensions of 20px/20px.

Example of correct application:

<!--[ icon ]-->
<b:include name='folder-icon'/>

<!--[ icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'></path><path d='M3.5 12H20.33'></path></svg>

How do I change the destination link?

The new destination link must be written in the href attribute, in the example above we used href='#!', replace the #! symbol with your new url.

How to add line break to menu?

The separator line is used to categorize the menu from one another. To use it, add a new className br in the <li tag, for more details see the example below:

<!--[ Standard menu ]-->
<li>...</li>

<!--[ Dropdown ]-->
<li class="drp">...</li>

<!--[ Standard menu ]-->
<li class="br">...</li>

<!--[ Dropdown ]-->
<li class="drp br">...</li>