Before you ask please READ THIS

Reduce Text Logo size on mobile site and add tagline

Hi there,

I am using the text-only logo setting, so I am trying to find an option of reducing the logo text-size upon detecting the mobile site being used.

Anyway to achieve this via CSS for this purpose?

Another thing is can we add an additional tagline below the text-only logo?

Thanks and hear from you soon.

Comments

  • AirAir
    Posts: 10,970
    Hey:-)
    ChristWolves said: Another thing is can we add an additional tagline below the text-only logo?
    Not by theme options, you would need to modify theme code, and I am not sure how such change would affect the theme header.
    Can't you do it on Image? You could use SVG for example.
    ChristWolves said:
    I am using the text-only logo setting, so I am trying to find an option of reducing the logo text-size upon detecting the mobile site being used.

    Anyway to achieve this via CSS for this purpose?
    Please use such custom CSS:
    @media only screen and (max-width: 600px) {
        a.logo {
            font-size: 15px;
        }
    }
    With kind regards.
  • Hi Air,

    Thanks much for your kind response. May I know if I use SVG do I get the same responsiveness on the image size when viewed on desktop vs on mobile? Currently I am setting my text-only logo to be 28px on desktop and 18px on mobile.

    I would envision the experience to be like when the 'hamburger/mobile menu' is up, then text will automatically be reduced to 18px. Let me know if we can utilise the 'mobile menu' as an indicator for the text-only logo to switch to a smaller size.

    Thanks again!
  • AirAir
    Posts: 10,970
    Hey :-)

    Image logo has a setting for width on mobile Appearance → Customize → Header Settings → Logo → Max width - on mobile devices.

    So you can set a different size for mobiles.

    SVG logos are even more powerful as they don't lose quality.
    You can read more about them here https://rifetheme.com/help/docs/customizing-the-theme/header/svg-logo/ or https://apollo13themes.com/svg-logo-on-wordpress-site/

    But if you are fine with text logo, I think you should stick with it as it is the easiest varaint to use :-)

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!