Using svg file for logo, align left, how can I make it responsive for all? - Support

Tagged: align left, covers navigation menu on mobile devices, svg logo

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
April 12, 2024 at 6:59 am #1439789

Intell
Participant

Hello,
I’m using a svg file (correction, tried to use) for my logo, and maybe that’s just not going to work overall because…

The darn thing gets crazy big on some mobile devices and covers the navigation menu – lol.

And then on big ‘ol screens it doesn’t align as far left as the title so everything is aligned.

I don’t mind using a png, but if it’s possible, I’d love to use a svg.

Please advise.

P.S. for some reason when I tried to install the child theme, the whole site design went nuts (possible plugin discrepancy?) Yea, so I’d rather use a png file than try to figure that all out. ha ha

Thanks a million!!

April 12, 2024 at 2:58 pm #1439825
Rikard
Keymaster
Hey Intell,

Please try the following in Quick CSS under Enfold->General Styling to align the logo on mobile devices:
```
@media only screen and (max-width: 767px) {
  .responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 60%;
  }
}
```
When you have activated the child, then please go to Enfold->Import/Export and import the parent theme settings. If your settings don’t apply after that, then please try to save the theme options in order to regenerate the theme resources.

Best regards,
Rikard
April 20, 2024 at 6:29 pm #1440433

Guenni007
Participant

open your svg code and have a look if it has width and height information inside on svg tag.
by the way – you can simplify your svg code on svgomg
choose on right options : prefer viewbox to width/height
maybe that will help

Edit: i tested my suggestion on uploading a svg file with width and height information. There must be something different.
There must be a css rule in your setting that prevents your svg logo from fitting into the surrounding container – in any case, i didn’t have to set any extra css rules to achieve this.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.