Articles on: Knowledge Base

How to change the header logo size of the Knowledge Base

Improve a Knowledge Base logo that looks too small by choosing a better logo format or adjusting its height with CSS.


The Knowledge Base header keeps a fixed visual structure so navigation stays aligned. If your logo appears too small, first check the logo file itself, then use custom CSS only if the image cannot be improved.



Choose the right logo file


A logo that is too tall, too detailed, or not wide enough can appear small once it is constrained by the Knowledge Base header.


A good Knowledge Base logo should:

  • Stay simple → avoid too many small details
  • Use one horizontal line → keep the icon and company name aligned
  • Be wider than it is tall → horizontal logos fit the header better
  • Use SVG when possible → SVG files scale more cleanly across screens


The header logo height is constrained to preserve the Knowledge Base layout. If the logo height grew freely, other header elements could become misaligned.



Customize the logo height with CSS


If the image file cannot be adjusted, you can increase the displayed logo height with custom CSS.


Start from app.crisp.chat, then open Settings → Knowledge Base Settings → Customize your Knowledge Base → Include custom HTML code.


Paste this snippet and adjust the height value if needed:

<style type="text/css">
.csh-header-main-logo img {
height: 40px !important;
}
</style>


If 40px is too large or too small, change the value gradually and check the Knowledge Base header after saving.



Frequently Asked Questions


Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.


Should I edit the logo image or use CSS?


Edit the logo image first whenever possible. A clean horizontal logo gives a better result across devices. CSS is useful when you need a quick adjustment or cannot change the source file.


Can increasing the logo height break the header?


Yes, if the height is too large. Increase the value progressively and check desktop and mobile views to make sure navigation remains aligned.


Updated on: 03/05/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!