Home → Contao →

Usage: Logo overlapping menu on left side on mobile devices

• Edit

Gerald

05 Jul, 2025 10:50 AM

Product: Tao Contao
Contao Version: 5.5.33
Browser and version: All browsers on mobiles

Dear customer support,
for many years everything works absolutely fine with your great theme "Tao".
Thank you so much!
One question: Is there a functionality that reduces the logo size on mobile devices automatically, as in the smallest layout, the logo overlaps the mobile navigation button in the header. In all other setups (desktop, tablet, mobile landscape) the size of the logo works fine. Please see screenshot attached.
Perhaps there is also any other fix for this issue.
The menu still works, even if the overlapping occurs, but it doesn't look professional.

Tested on a Android Samsung S23, A55 and several other Samsung mobile devices.
(You can replicate this problem using the chrome developer tools (device emulation). You have to test it on a real mobile device.

Thank you so much for any hint!
BR,
Gerald

• Screenshot_20250705_124342_Chrome.jpg 428 KB

1. Support Staff 1 Posted by RockSolid Theme... on 07 Jul, 2025 06:38 AM

   

   Thank you for submitting your question!

   You can limit the maximum width of the logo image using the following CSS code:

   @media screen and (max-width: 599px) {
       .logo img {
           max-width: calc(100vw - 8em);
           height: 4.0625em;
           object-fit: contain;
       }
   }
   

   Add this code to the files/tao/css/custom.css file on your webspace.

   • Edit

2. 2 Posted by Gerald Helminge... on 07 Jul, 2025 07:26 AM

   

   Danke! Funktioniert super.

   • Edit