On some invoice designs a large logo can run into the invoice details table underneath it (the box with the invoice number and dates). There are two ways to fix it. Try making the logo smaller first. If the logo still overlaps, move the details table down in the invoice style’s CSS.

Prefer to watch?

What does an overlapping logo look like?

In the example below, which uses the Standard design, the logo runs over the invoice details table.

How do I make my logo smaller?

Changing the logo size is the simplest fix.

1. Go to Sales > Invoice customisation.

2. Click {MY LOGO} in the sample invoice. The Invoice/Estimate Logo panel opens.

3. Type a smaller number in the Width box, then press the Tab key. The Height follows automatically while Auto-size height is ticked.

4. Open the preview of an invoice to check how the logo looks.

   

How do I move the invoice details table down?

If the logo still overlaps the invoice details table, you can move the table down by changing the CSS of your invoice style. The example below uses the Standard design, where the table is positioned with a top value in the .invoice-details-tbl rule. Raising that value moves the table down the page and makes room for the logo.

1. Open the preview of any invoice.

2. Click the green Invoice style gallery button in the top left.

   

3. On the active style (highlighted green), click the orange Customise this style bar. The Custom CSS Editor opens on the right.

   

4. In the editor, find the .invoice-details-tbl rule.

   

5. Increase the top value a little.

6. Click Apply changes to see the effect in the preview.

7. Repeat the last two steps in small increments until the table sits clear of the logo.

8. Click Save.

After the change, the table sits below the logo.

Why does my invoice design look different to the example?

The CSS depends on the invoice design you have chosen, so the lines you see in the editor may differ from the Standard example above. In the Neon design, for example, the .invoice-details-tbl rule has no top value. The details table sits in the normal flow of the page, directly below the logo and addresses, so a taller logo pushes the table down instead of overlapping it.

If your design has no top value to change, make the logo smaller as described above.

For more ways to style your invoices with the CSS editor, see 10 basic CSS tricks for styling your invoices.

Related topics

More on designing your invoices and using the CSS editor:

• 10 basic CSS tricks for styling your invoices: Simple CSS changes you can make in the invoice style editor.
• Customising your invoice design: Upload your logo and choose an invoice style in Invoice customisation.