-
Posts
-
Hi folks,
Like some others, I discovered that on mobile browsers the logo interferes with the menu. I tried a few different CSS solutions, as recommended in posts here and here but those don’t quite work, perhaps because my logo is narrower than the standard format — 340×71 vs. the standard 340×156.
Is there a way to use an entirely new logo for mobile sizes? I can create an image that fits a different aspect ratio by stacking the text instead of writing it on one line.
The site is http://busycreator.com so you can see it in action.
A bonus follow-up to this question is how to switch [both] logos to SVG instead of PNG. In the past I’ve tried using some SVG plugins but it also changed the alignment of the logo and in general it didn’t function the way Enfold intends.
Hi Prescott!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) { .logo img { opacity: 0; } .logo a { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }}Cheers!
YigitThanks Yigit, that worked. I had to create a new image that was 340×156, though. Otherwise the same problem occurred where the logo would expand to the entire header and go behind the menu icon. I suppose I can experiment with aspect ratios — maybe trim that to 140 or 125 — but that’s for later.
I also moved the image to the left positioning by using
background-position: 0 50%;which worked fine. For now, it’s sorted.
- The topic ‘Alternate logo for mobile?’ is closed to new replies.