Fusion provides one area for logo placement, so you will need only one version of your logo.

Setting Up Your Logo

To add your logo, follow these instructions:

1. Open the index-home.html file in your code editor.
2. Search for the following class: logo
3. Type the location to the directory/folder for your logo, which will be displayed in the nav section. For example, the path to the logo could be images/logo.png. The path and file name should be inserted between the parenthesis.
4. Save the index-home.html file and view the changes in your web browser.

These instructions can be repeated for all of the template files containing images: about.html, contact.html, portfolio.html, and project-details.html.

Here is the code which you need to modify to change the file name or directory folder for the logo:

<img class="logo" src="assets/images/logo.svg" width="34" height="30" alt="">

Resizing Your Logo

Depending on the size of your logo, you will have to adjust the “width” and “height” properties for the .logo img class. To change these properties, follow these instructions:

1. Open the index-home.html file in your code editor.
2. Search for the following class: logo
3. Adjust the “width” and “height” properties of both classes for your logo.
4. Save the index-home.html file and view the changes in your web browser.
5. Repeat steps 3-4 as necessary until your logo is adjusted properly. This is necessary as your logo could be cropped (width and/or height wise) or it could be too big and only a portion of the image would appear. You may have to adjust the “width” and “height” properties until your logo appears without being cropped.

Here is the code which you need to modify to change the “width” and “height” properties for the logo:

<img class="logo" src="assets/images/logo.svg" width="34" height="30" alt="">

Resizing Your Logo for Different Screen Sizes

This template has a responsive layout. As the screen size increases/decreases, the layout adjusts accordingly. The same applies to your logo and/or any images you add to the HTML files. Make sure you have the “width” and “height” properties adjusted to sizes so that your logo looks good when the screen size decreases or increases.

You may have to adjust the “width” and “height” properties repeatedly until your logo displays as desired.