Prism provides two areas for logo placement, so you will need a large version of your logo and a smaller version, unless you are using .svg rather than .png or .jpg.

Setting Up Your Logo

To add your logo, follow these instructions:

1. Open the index.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/large_logo.png. The path and file name should be inserted between the parenthesis.
4. Search for the following class: footer
5. Type the location to the directory/folder for the smaller version of your logo which will be displayed in the footer. For example, the path to the logo could be images/small_logo.png. The path and file name should be inserted between the parenthesis.
6. Save the index.html file and view the changes in your web browser.

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

<li class="menu-item logo">
    <img src="assets/images/logo-black.svg" alt="">
</li>

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

<div class="col-sm-3">
    <img src="assets/images/logo-white.svg" alt="">
</div>

Resizing Your Logo

Depending on the size of your logo, you will have to adjust the “width” and “height” properties for the #navigation-menu li img ID and .footer .row.items img class. To change these properties, follow these instructions:

1. Open the style.css file in your code editor.
2. Search for the following ID and class: #navigation-menu li img and .footer .row.items img
3. Adjust the “width” and “height” properties of both classes for your logo.
4. Save the style.css 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 header logo:

#navigation-menu li img {
    width: 33px;
    height: 40px;
}

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

.footer .row.items img {
    width: 40px;
    height: 40px;
}

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. You will have to adjust the “width” and “height” properties when the screen size decreases or increases. To make changes to the #navigation-menu li img ID and .footer .row.items img class as the screen size increases/decreases, follow these instructions:

1. Open the style.css file in your code editor.
2. Search for the following queries: @media all and (max-width: 767px). This screen size is generally for tablets and smartphone devices. Your logo will need to decrease in size so that it will appropriate for all screen sizes that 767px wide and smaller.
3. Adjust the “width” and “height” properties of the #navigation-menu li img ID class within the @media only screen query. Changing these properties will adjust the size of the smaller logo in the navigation bar and footer. Since the height of the navigation bar is fixed, the maximum height of your logo should be sized so that it’s not too big. Adjust your width/height accordingly so that the logo fits properly in the navigation bar and footer.
4. Adjust the “width” and “height” properties of the .footer .row.items img class within the @media only screen query. The size of the footer logo will change based on the width and height assigned to the .footer .row.items img class. Adjust your width and height accordingly so that the logo resizes.
5. Save the style.css file and view the changes in your web browser.

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

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

#navigation-menu li img {
    width: 33px;
    height: 40px;
}

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

.footer .row.items img {
    width: 25px;
    height: 30px;
}