Usage: Logo covering navigation button on mobile website

Martijn's Avatar

Martijn

13 Nov, 2020 10:35 AM

Product: Tao Contao
Contao Version: 4.10.4
Browser and version: IOS 14.1 Safari

Hello, I have used the Tao theme for my company website (www.mupac.nl) and I've noticed that on the mobile website version my company logo is covering the navigation button. What is the solution to avoid this? Do I need to reduce the image dimensions, or do I need to change something in the css?

  1. Support Staff 1 Posted by RockSolid Theme... on 13 Nov, 2020 10:49 AM

    RockSolid Themes's Avatar

    Thank you for submitting your question!

    To fix this issue, please add the following code to the files/tao/css/custom.css file:

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

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac