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
Can't you do it on Image? You could use SVG for example.
Please use such custom CSS: With kind regards.
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!
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.