Why is my logo still fuzzy?

meerkat
New Member
1 0 0

Had the same issue using WeTheme's Flow theme, but found a hacky workaround.

First, I removed the logo image from the template customizer. That causes the template to default to your site name in text where the logo would go. Then I used Chrome inspector to find class name for element where that text appears. for me it was called site-header__logo. Then in global settings, I uploaded a .svg version of my logo to the "Files" section and copied the image URL. Next went in to CSS, (for Flow theme it was called timber.scss.liquid) and there I added code to set the opacity to 0 for the element using the class I just grabbed from the inspector, which was .site-header__logo-link. This made the site name transparent and no longer visible on the page. Finally, I went back in the Chrome inspector and found the parent element for the previous element. It was .site-header__logo (good ol' BEM) and then back in CSS, added in my .svg file as a background image... Here's what my CSS looked like:

.site-header__logo {
width: 130px;
height: 53px;
background-image: url("url for svg file goes here");
background-size: cover;

}

.site-header__logo-link{
opacity: 0;
}

0 Likes
sophiab
New Member
1 0 0

hi - i did this and it worked, but it won't say - how do i save it in CSS?

0 Likes