Add Horizontal lines either side of the custom logo

Do you have an example from another site of what you’re wanting to achieve? Just a solid 1px tall line that spans out from the left/right of your logo?

Hey,

Many thanks for the response.

Example: https://www.volkswagen.co.uk/

Looking at a height of 2px

• This reply was modified 5 years, 1 month ago by thepommie.

The only way I see to do something like this with CSS is using a background image though it may not get you exactly what you’re looking for.

Try the following code in Appearance->Customize->Additional CSS

.site-branding .custom-logo-link {
  background-image: url('https://i.snipboard.io/ev27uF.jpg');
  background-repeat: repeat-x;
  background-position: center;
}

Is that something close to what you’re looking for?

It’s super close and a million miles closer than what I have got so far.

If I use Storefront power pack to make the logo padding its max at 160px
Then change the logo to a jpeg it gives the impression that the horizontal line stops and starts before and after the logo

I’m sure this not the ‘best’ way to solve it but it works until I find another solution

Thanks so much!!

You’re welcome! You may want to save that image listed in the url() part as well and upload it to your own site if you decide to use it. That way, in the event that for some reason it gets removed from snipboard, you’ll have your own copy of it.

In the CSS, you’d just update the URL to the one where the image gets uploaded to on your own site.