Relativity has the ability for you to add your own logo in the header to give your site a more customized look and feel.

Adding a Logo Image

Note: Relativity uses two logos – one black and one white. The logo switches to the white version when the visitor selects the hamburger menu in the template. As a result, you will need two versions of your logo in two different sizes – one for desktop screens and mobile screens.

To add a new logo, follow these instructions.

1. Select the images from your PC that you want to display as your logo and resize them, if necessary.
2. Copy the logo images to the assets/images folder.
   • If you’re testing the template locally on your PC, then simply copy the images.
   • If you’ve already uploaded the template to your host’s server, then FTP the images into the assets/images folder.
3. Open the style.css file in a code editor and perform a search for the following files:
   • ../images/logo-black.svg (for desktop screens)
   • ../images/logo-small-black.svg (for mobile screens)
   • ../images/logo-white.svg (for desktop screens)
   • ../images/logo-small-white.svg (for mobile screens)
4. Change the image file names to the file names of your logo images.
   • For more information, refer to the code example.
5. Save the file and view the updates on your PC.
   • If you’re testing locally, simply drag the index.html file into an empty tab of your favorite internet browser.
   • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html file, and then view it in your browser

Here is the code which you need to modify to add a new logo image in the header:

.menu .logo-black {
    background: url("../images/logo-black.svg") no-repeat;
    left: -1.55em;
}

@media (max-width: 47.9em) {
    .menu .logo-black {
        background: url("../images/logo-small-black.svg") no-repeat;
        left: -1em;
    }
}

.menu .logo-white {
    background: url("../images/logo-white.svg") no-repeat;
    left: 0;
}

@media (max-width: 47.9em) {
    .menu .logo-white {
        background: url("../images/logo-small-white.svg") no-repeat;
        left: 0.2em;
    }
}