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: 9,799
    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: 9,799
    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!

In this Discussion