Jump to content

Logo Not Centering Properly in Header Across Screen Sizes

Go to solution Solved by tuanphan,

Recommended Posts

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!

screencapture-mindofalexander-squarespace-my-work-2023-08-29-14_43_13.png

screencapture-mindofalexander-squarespace-my-work-2023-08-29-14_42_58.png

Edited by mindofalexander
Link to comment
6 hours ago, mindofalexander said:

Bump

Replace the code marked in the image with this.

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

 

Screenshot_168.png

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution

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>

 

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
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

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

Screenshot 2023-09-03 at 4.26.50 PM.png

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.