Docs

Documentation

Get started by browsing the docs below to pinpoint what you're looking for.

Adding an image to the nav icons

In this tutorial, you'll learn how to add an image to the nav icons.

Note: This tutorial only applies to the themes that have the setting.

Step 1: Find an image for your navigation item menu

Upload the image that you've got into the theme resources. The theme resources will be located at ACP -> Customization -> Appearance -> Themes. Then, click the drop-down icon and click the first menu called "Manage resources".

Step 2: Uploading the image to theme resources

When you get to the page, click the button called "Add Resource", and leave every single option the same, but not resource (the last one).

After you're done, click the 'Save' button below.

Now, you'll need to get the resource template tag by going back to manage resource page and search for the name of your icon. Then, on the last table row, you'll need to copy the template tag for your image.

Step 3: Linking the image into the menu item

On the theme page, click the first icon (</>), and then select the 'CSS' tab. After that, load the 'custom.css' file.

The example of the code:

.ipsNavBar_primary > ul > li > a::before {
  content: "";
  width: IMAGE WIDTHpx;
  height: IMAGE HEIGHTpx;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  display: inline-block;
}
html[dir="ltr"] .ipsNavBar_primary > ul > li > a::before {
  padding-right: 5px;
}
html[dir="rtl"] .ipsNavBar_primary > ul > li > a::before {
  padding-left: 5px;
}

You'll only need to change two things: 'IMAGE WIDTH' and 'IMAGE HEIGHT'. You'll replace width and height to your image dimension.

Step 4: Getting the menu name and inputting it into the custom CSS file

To find the menu name, you'll have to hover over the navigation and right click on your mouse and click "Inspect" or F12. Make sure you've selected the <a> tag on your inspect element window because that's where we gonna pull the ID from a specific menu.

So, for example:

<a href="http://www.themetree.net/themedocs/" data-navitem-id="85">
  Theme Docs
</a>

You'll only need data-navitem-id, and make sure to copy data-nav-id="#". Replace the hashtag with your item number.

Now, let's move on to fetching the image for the menu item.

.ipsNavBar_primary > ul > li > a[data-navitem-id="85"]::before {
  background-image: url(RESOURCE TEMPLATE TAG HERE);
}

You'll only need to change one thing, the 'RESOURCE TEMPLATE TAG HERE'.

I have explained this on Step 1 and Step 2, so you'll know what to do after that.

After you're done, click the "Save" button and refresh your site. The new changes that you've made will load your custom nav image into your menu item ID.

Sincerely,

ThemeTree

Edited by Brian A.

×