7.1 Adding second logo centered in header

Site URL: http://torchglow.video

Hello,

I am trying to add a second logo centered in my header like the attached mockup, but I can't quite figure it out.

Page PW is T0rchgl0w

The image path  for the second logo iamge is https://static1.squarespace.com/static/6016ebcd5d14073e2249cdd0/t/6040178f0f70e01f9af5997b/1614813071300/Torchglow_Flame-Icon_White-Transparent.png

Any help would be greatly appreciated!

UPDATE:  I've gotten it pretty close!

It shows up pretty much how I want it to. It moves relative to the window size, however if the window gets too small it starts getting jumbled up with the menu and primary logo. Is there a way to make it disappear once the window gets to  a certain size?

Additionally, in the mobile experience I would like for it to go away completely. Right now it is just overplayed with the primary logo and looks sloppy.  Screenshot is attached and shows this issue.

Here is the code I'm using in the header Code Injection:

<strong class="logo2">
<a href="http://torchglow.video"><img src="https://static1.squarespace.com/static/6016ebcd5d14073e2249cdd0/t/6040178f0f70e01f9af5997b/1614813071300/Torchglow_Flame-Icon_White-Transparent.png" alt=""></a>
</strong>

Here is what I'm using in the Custom CSS:

.logo2 img {
    height: 75px;
  margin-top: 1%;
  position: relative;
  left: 47%;
  z-index: 2
}

Sorta got it figured out. Not as clean as I'd like, but it works. Added the following code to the Custom CSS:

@media screen and (max-width: 600px) {

    .logo2 {display:none;}

}

I think we can use Script code to insert logo img tag there. Do you still need help on this?

All good, thanks!

I got it all working using the code above, but tweaking a couple of things.

.logo2 img {
    height: 40px;
  margin-top: 2.5%;
  position: relative;
  left: 48.75%;
  bottom: 18px;

.logo2 img {
    height: 40px;
  margin-top: 2.5%;
  position: relative;
  left: 48.75%;
  bottom: 18px;

On 3/31/2021 at 2:01 AM, torchglow said:

All good, thanks!

I got it all working using the code above, but tweaking a couple of things.

.logo2 img {
    height: 40px;
  margin-top: 2.5%;
  position: relative;
  left: 48.75%;
  bottom: 18px;

.logo2 img {
    height: 40px;
  margin-top: 2.5%;
  position: relative;
  left: 48.75%;
  bottom: 18px;

 

Do you want to make logo clickable?

Nope! Just for visual purposes.