Logo Not Centering Properly in Header Across Screen Sizes

Hello everyone,

I am experiencing some roadblocks with the positioning of the logo in the header of my website. While it does appear in the desired footer position of the viewport, the placement is not consistent across different screen sizes.

Here are the details:

1. Desired Position: I want the logo to appear at the footer position in the viewport within the header section, right underneath my navigation links.

2. Current Issue: The logo appears fine on certain screen sizes but jumps around or is misaligned on others, particularly smaller mobile devices and larger desktop screens.

3. Attempted Fixes: I have tried using fixed positions, percentages, and viewport units, but none seem to give me the universal fit I'm aiming for.

Questions:

1. How can I adjust the CSS to make sure the logo stays in the intended position across all screen sizes?
2. Is there a responsive design approach that I could apply to ensure the logo scales and positions correctly?
3. Are there JavaScript solutions I could consider for dynamic positioning?

Current code:
 

CSS:

.header-nav-wrapper {
  margin-left: 60px;  /* Adjust this value to move it to the right */
}

body #custom-logo-container img {
  width: 65px;
  height: auto;
  transition: all 0.3s ease; /* Add smooth transition */
}

body #custom-logo-container #blue-logo {
  display: none;
}

body #custom-logo-container {
  position: fixed;
  left: 50px;
  bottom: 32.5px;
  z-index: 9999;
}

body #custom-logo-container img:hover {
  width: 75px; /*
}

#custom-logo-container img {
  transition: transform 0.3s ease;
  transform-origin: center;
}
 

HTML:

<div id="custom-logo-container">
  <a href="/my-work">
    <img src="https://static1.squarespace.com/static/64dd1fdf85838e743b251fa8/t/64ecd462b1e2496a4ec2430c/1693242466247/mind-of-alexander-logo.png" alt="logo" />
  </a>
</div>
 

Javascript:

<script>
  // Logo animation change
  document.addEventListener("DOMContentLoaded", function () {
    const logoElement = document.querySelector("#custom-logo-container img");

    if (!logoElement) {
      console.error("Could not find the logo element");
      return;
    }

    const originalSrc = "https://static1.squarespace.com/static/64dd1fdf85838e743b251fa8/t/64ecd462b1e2496a4ec2430c/1693242466247/mind-of-alexander-logo.png";
    const hoverSrc = "https://static1.squarespace.com/static/64dd1fdf85838e743b251fa8/t/64ecd216552ba96ef9db6a8c/1693241878229/mind-of-alexander-logo-blue.png";

    logoElement.addEventListener("mouseover", function () {
      logoElement.src = hoverSrc;
      logoElement.style.width = "70px"; // Reduced size from 75px to 70px
    });

    logoElement.addEventListener("mouseout", function () {
      logoElement.src = originalSrc;
      logoElement.style.width = "65px";
    });
  });
</script>

 

My website URL: https://mindofalexander.squarespace.com/

I would appreciate any suggestions or code snippets that could help me resolve these issues. Thank you!

Bump

6 hours ago, mindofalexander said:

Bump

Replace the code marked in the image with this.

left: calc(~"7.5vh - 36.5px") !important;

1 hour ago, Web_Solutions said:

Replace the code marked in the image with this.

left: calc(~"7.5vh - 36.5px") !important;

 

Hey again!

Although it helped the logo look good in 1920x1080 I noticed that the logo is still behaving wrong in 4K. Any ideas? 

Please see screenshot.

Bump

2 hours ago, tuanphan said:

Try Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div#custom-logo-container').appendTo('.header-announcement-bar-wrapper');
});
</script>
<style>
  body #custom-logo-container {
    position: absolute !important;
    bottom: unset !important;
    top: 50% !important;
    transform: translateY(-50%);
    left: 3vh !important;
}
</style>

 

Thank you! This worked! As always I appreciate your help

21 minutes ago, Una01 said:

Hi guys, 

 

I have an issue with my header.

 

There is an extra space on top. See attached image.

 

I would like it to be in the middle (same space top and bottom).

 

Can you help? 

Hello, it looks like your post might be better suited in a different section or as a new discussion thread. Posting under existing threads, especially those that have already been resolved, is generally not common practice.

Could you please consider relocating your post or starting a new discussion to ensure it receives the appropriate attention?

Thank you!

Okay. Thanks. 

Good day folks!

So I'm struggling with my logo as well. 

More specifically, when the screen size is smaller than the desktop, but not as small as a mobile phone. 

I was able to adjust the logo to be center on a mobile phone screen, but the in-between desktop and mobile phone sizes seem to be just a bit off center. 

Would it be impossible to take a look?

This is the website: www.successisalifestyle.com/pwyw

On 10/1/2024 at 10:41 AM, IIIJQIII said:

Good day folks!

So I'm struggling with my logo as well. 

More specifically, when the screen size is smaller than the desktop, but not as small as a mobile phone. 

I was able to adjust the logo to be center on a mobile phone screen, but the in-between desktop and mobile phone sizes seem to be just a bit off center. 

Would it be impossible to take a look?

This is the website: www.successisalifestyle.com/pwyw

Which screen sizes do you see problem? I tried testing some and all are fine