🧰Add Icons in Navigation bar

The navigation bar includes an option to add icons to the navigation item

Navigation bar

To customize:

• Go to Settings > Code injection from the admin menu

• Choose Site footer

  

  Code injection
• Below is the code needed to add a specific icon:

Copy

<script>
  const blogLinks = document.querySelectorAll(".nav-item__ADD_THIS_NAME_OF_NAVIGATION_ITEM");
  
  const blogSvgIcon = `CHANGE_THIS_TO_YOUR_SVG_CODE`

  if(blogLinks.length){
  blogLinks.forEach(link => {
    link.insertAdjacentHTML('afterbegin', blogSvgIcon);
    })
  }
</script>

The selector class is based on the navigation item's name. For example, an item named "Blog" would have the selector ".nav-item__blog".

To view the code of an SVG icon, open the file (*.svg) in any text editor.

• Copy this code and paste it inside Site footer input area

• Replace "CHANGE_THIS_TO_YOUR_SVG_CODE" with your SVG code and ".nav-item__ADD_THIS_NAME_OF_NAVIGATION_ITEM" with the name of the navigation, like this:

• Click Save to save your work!