Jump to content

7.1 Adding second logo centered in header

Recommended Posts

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!

Screen Shot 2021-03-12 at 11.41.14 AM.png

Link to comment
  • Replies 6
  • Views 939
  • Created
  • Last Reply

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
}

 

Screen Shot 2021-03-12 at 3.16.50 PM.png

Link to comment
  • 2 weeks later...

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;

 

Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.