Add a Home Icon to the Main Navigation

What does this code do?

This code snippet will allow you to use a home icon in your main navigation instead of the word ‘home".

Note: This works best if your main navigation is the same colour on each page. This is because the icon will not colour based on the colour of the background. For example, if you have your main navigation set to be transparent so that it overlaps an image, be mindful that there may be some pages where the home icon stands out and some pages where it does not.

Note: All options add a home icon in the mobile menu as well.

Video Tutorial

Option 1: Home Icon with other Navigation Items

Step 1: Add a Home Page

Your first step is to add your home page to your main navigation section in Pages.

Step 2: Create Your Icons

Create your home icon. If your main navigation and mobile menu need different coloured icons, make sure to create one for each of them. Then upload these images into Design > Custom CSS > Manage Custom Files.

Step 3: Custom Code

Copy and paste this code into Design > Custom CSS

/* Home Icon in Main Navigation */
.header-nav-item a[href="/"],
.header-menu-nav-item a[href="/"] {
  visibility: hidden;
  padding: 0;
}
.header-nav-item a[href="/"]:after {
  visibility: visible;
  background: url("MAIN NAVIGATION ICON LINK") no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  width: 25px; /* width of main navigation home icon*/
  height: 25px; /* height of main navigation home icon*/
  content: "";
  vertical-align: middle;
}
/* Home Icon in Mobile Menu */
.header-menu-nav-item a[href="/"]:after {
  visibility: visible;
  background: url("MOBILE MENU ICON LINK") no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px; /* width of mobile home icon*/
  height: 50px; /* height of mobile menu home icon*/
  content: "";
  vertical-align: middle;
  margin-left: -30vw; /* moves the icon to the left */
  margin-bottom: 5vw; /* add spacing below icon */
}

Then click on the icons in Manage Custom Files to insert their links in the correct place.

Option 2: Add a Home Icon Next to the Button

Step 1: Add a Home Page

Your first step is to add your home page to your main navigation section in Pages. This will be hidden on desktop and then used for the home icon in the mobile menu.

Step 2: Create Your Icons

Create your home icon. If your main navigation and mobile menu need different coloured icons, make sure to create one for each of them. Then upload these images into Design > Custom CSS > Manage Custom Files.

Step 3: Custom Code

Copy and paste this code into Settings > Advanced > Code Injection > Header

<!-- Home Icon -->
<div id="home-icon"><a href="/"></a></div>

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Home Icon -->
<script>
  (function () {
    var home_icon = document.getElementById("home-icon");
    var contact_button = document.querySelector(".header-actions-action--cta");
    contact_button.before(home_icon);
  })();
</script>

Copy and paste this code into Design > Custom CSS

/* Home Icon in Main Navigation */
.header-nav-item a[href="/"] {
  display: none; /* hide home link */
}
#home-icon a {
  content: url(MAIN NAVIGATION ICON LINK);
  width: 30px; /* width of main navigation home icon */
  height: 30px; /* height of main navigation home icon */
  margin: 0vw 2vw; /* spacing to the left and right of icon */
}
.header-actions-action--cta {
  margin-left: 0 !important; /* removes spacing to the left of button */
}
/* Home Icon in Mobile Menu */
.header-menu-nav-item a[href="/"] {
  visibility: hidden;
  padding: 0;
}
.header-menu-nav-item a[href="/"]:after {
  visibility: visible;
  background: url("MOBILE MENU ICON LINK") no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px; /* width of mobile home icon*/
  height: 50px; /* height of mobile menu home icon*/
  content: "";
  vertical-align: middle;
  margin-left: -30vw; /* moves the icon to the left */
  margin-bottom: 5vw; /* add spacing below icon */
}

Then click on the icons in Manage Custom Files to insert their links in the correct place.

Option 3: Add a Home Icon on the Left

Step 1: Add a Home Page

Your first step is to add your home page to your main navigation section in Pages. This will be hidden on desktop and then used for the home icon in the mobile menu.

Step 2: Choose Your Heading Layout

Choose the following heading layout so that your title and navigation are in the centre and the button is on the right.

Step 3: Create Your Icons

Create your home icon. If your main navigation and mobile menu need different coloured icons, make sure to create one for each of them. Then upload these images into Design > Custom CSS > Manage Custom Files.

Step 4: Custom Code

Copy and paste this code into Settings > Advanced > Code Injection > Header

<!-- Home Icon -->
<div id="home-icon"><a href="/"></a></div>

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Home Icon -->
<script>
  (function () {
    var home_icon = document.getElementById("home-icon");
    var main_navigation = document.querySelector(".header-title-nav-wrapper");
    main_navigation.before(home_icon);
  })();
</script>

Copy and paste this code into Design > Custom CSS

/* Home Icon in Main Navigation */
.header-nav-item a[href="/"] {
  display: none; /* hide home link */
}
#home-icon a {
  content: url(MAIN NAVIGATION ICON LINK);
  width: 30px; /* width of main navigation home icon */
  height: 30px; /* height of main navigation home icon */
  margin: 0vw 2vw; /* spacing to the left and right of icon */
}
.header-actions-action--cta {
  margin-left: 0 !important; /* removes spacing to the left of button */
}
/* Home Icon in Mobile Menu */
.header-menu-nav-item a[href="/"] {
  visibility: hidden;
  padding: 0;
}
.header-menu-nav-item a[href="/"]:after {
  visibility: visible;
  background: url("MOBILE MENU ICON LINK") no-repeat center;
  background-size: 100% 100%;
  display: inline-block;
  width: 50px; /* width of mobile home icon*/
  height: 50px; /* height of mobile menu home icon*/
  content: "";
  vertical-align: middle;
  margin-left: -30vw; /* moves the icon to the left */
  margin-bottom: 5vw; /* add spacing below icon */
}

Then click on the icons in Manage Custom Files to insert their links in the correct place.

How To Use It

1. Choose the option that best suits you.

2. Create your home page and home icons.

3. Copy and paste the code as indicated above.

4. Insert your icon links into the code.

5. Customize size and spacing.