Genesis 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:
- Open the style.css file in your code editor.
- Search for the following class: .logo
- Type the location to the directory/folder for the large version of your logo which will be displayed in the first section of the site in the background-image: url( ) property. For example, the path to the logo could be images/large_logo.png. The path and file name should be inserted between the parenthesis.
- Search for the following class: .logo-small
- Type the location to the directory/folder for the smaller version of your logo which will be displayed in the navigation bar in the background-image: url( ) property. For example, the path to the logo could be images/small_logo.png. The path and file name should be inserted between the parenthesis.
- Save the style.css file and view the changes in your web browser.
Resizing Your Logo
Depending on the size of your logo, you will have to adjust the “width” and “height” properties for the .logo and .logo-small classes. To change these properties, follow these instructions:
- Open the style.css file in your code editor.
- Search for the following classes: .logo and .logo-small
- Adjust the “width” and “height” properties of both classes for your logo.
- Save the style.css file and view the changes in your web browser.
- 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.
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 index.html file. You will have to adjust the “width” and “height” properties when the screen size decreases or increases. To make changes to the .logo and .logo-small classes as the screen size increases/decreases, follow these instructions:
- Open the style.css file in your code editor.
- Search for the following queries: @media only screen and (min-width: 481px) and @media only screen and (max-width: 480px). Your logo will either decrease (if max-width is 480px) or increase (if min-width is 481px) according to the screen size.
- Adjust the “width” and “height” properties of the .bottom_bar .logo-small class within the @media only screen query. Changing these properties will adjust the size of the smaller logo in the navigation bar. Since the height of the navigation bar is fixed, the maximum height of your logo should be between 50px-60px. Adjust your width accordingly so that the logo fits properly in the navigation bar.
- Adjust the “width” and “height” properties of the .logo class within the @media only screen query. The size of the main logo will change based on the width and height assigned to the .logo class. Adjust your width and height accordingly so that the logo resizes.
- 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.