Jump to content

Img as logo[position:absolute] keeps jumping around depending on screen size

Recommended Posts

Site URL: https://koala-khaki-5ap9.squarespace.com/

Hi everyone, 

I have a problem with my img logo. I've positioned it according to my screen size but have noticed that on slightly smaller/larger screens the logo jumps around and ends up outside of the white nav container. My goal is to have it sit in the same position according to the nav bar (serifs of the font just above the bottom part of white nav container) at all times.

I have been struggling with this for a while and am looking for some help. 

Link to site: https://koala-khaki-5ap9.squarespace.com/
PW: lbl (as in, LBL but no caps)

I'm currently using the following code to position it but may have missed something critical, or perhaps what I want isn't even possible.
 

.header-title {
  position: absolute;
  top: -2rem;
  .header-title-logo {
    width: 200px;
    height: 200px;
    a { 
      max-height: 200px;
      height: 200px;
      width: 200px;
      img {
        max-height: 200px;
      }
    }
  }
}

I'm still learning my way around SQS and sometimes finding the right container to target is a bit tricky (even with two collection/block/id Chrome extensions). 

Any help would be immensely appreciated!

/Frankemon

Link to comment
  • Replies 3
  • Views 480
  • Created
  • Last Reply

@tuanphan Hi Tuan, thanks for replying. Yes! I am still really struggling with this so any help would be much appreciated.

So far I have been trying to manipulate the img, but am wondering if there are other ways? Manipulating the white nav bar instead maybe or something like that. I haven't been able to figure it out yet!

logo-screensizes.png

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.