Logo overlay nav and carousel / square logo amplify workaround

add to advanced preferences before </head>

/* Some themes set min-heights on the inner container */
.amplify-header .container {
min-height: 72px !important;
}

/* Force the logo to be small and fully contained */
.amplify-header .container h1 img {
height: 56px !important;
max-height: 56px !important;
width: auto !important;
margin: 0 !important; /* kill the negative pull-down */
display: block !important;
}

/* Reset any nav offset/hamburger spacing */
nav#amplify-navigation .sl-modern-menu,
.amplify-navigation .sl-modern-menu {
margin-left: 0 !important;
}
}
/* ---------- Tablet safety (optional) ---------- */
@media (min-width: 501px) and (max-width: 1023px) {
.section-instance-879aa8c4-19c7-49b9-87a8-08b44f8e8301.amplify-header {
height: 96px !important;
overflow: hidden !important;
}
.amplify-header .container h1 img {
height: 80px !important;
max-height: 80px !important;
margin: 0 !important;
}
nav#amplify-navigation .sl-modern-menu,
.amplify-navigation .sl-modern-menu {
margin-left: 0 !important;
}
}

/* ---------- Desktop only ---------- */
@media (min-width: 1024px) {
/* Cap header height, allow overlapping elements to show */
.section-instance-879aa8c4-19c7-49b9-87a8-08b44f8e8301.amplify-header {
height: 150px; /* hard cap */
overflow: visible; /* let the logo hang down */
position: relative;
z-index: 2;
}
.splide__slide {
-webkit-tap-highlight-color: #225faf; /*adjust to your quicklinks bar color*/
background: #225faf;
}
@media (min-width: 1024px) {
.amplify-header .container h1 img {
height: 220px;
/* 50px = 200 (logo) - 150 (header cap) */
/* Pull it down by that 50px plus the tiny bleed */
margin-bottom: calc(-50px - var(--logo-bleed, 6px));
}
}

@media (min-width: 1024px) {
/* De-seam the carousel stack */
.amplify-carousel,
.amplify-carousel .splide,
.amplify-carousel .splide__track,
.amplify-carousel .splide__list,
.amplify-carousel .carousel-slide-image {
border: 0 !important;
box-shadow: none !important;
}

/* Hide any subpixel gap at the bottom of the carousel */
.amplify-carousel {
margin-bottom: -1px;
}

/* If the line is from the section *after* the carousel having a top border: */
.amplify-carousel + .amplify-target-locator {
border-top: 0 !important;
box-shadow: none !important;
}
}

/* Nav sits below the header */
nav#amplify-navigation.section-instance-7bc2e19f-c46a-49d9-89fc-fd7d1f2b9930.amplify-navigation,
.section-instance-7bc2e19f-c46a-49d9-89fc-fd7d1f2b9930.amplify-navigation {
position: relative;
z-index: 1;
}

/* Push links right by actual logo width (JS sets --logo-w). */
nav#amplify-navigation .sl-modern-menu,
.amplify-navigation .sl-modern-menu {
margin-left: var(--logo-w, 180px);
}

/* Make sure the carousel renders behind the logo */
.carousel-slide-image {
position: relative;
z-index: 0;
}
}

/* Mobile unchanged (hamburger etc.) */
</style>

if (!nav || !logo) return;

// tweak this if you want more/less bleed onto the carousel (CSS uses it)
nav.style.setProperty('--logo-bleed', '6px');

function setNavOffset() {
if (window.innerWidth < 1024) {
nav.style.removeProperty('--logo-w');
return;
}
const w = Math.ceil(logo.getBoundingClientRect().width);
nav.style.setProperty('--logo-w', w + 'px');
}

if (logo.complete) setNavOffset();
else logo.addEventListener('load', setNavOffset);

window.addEventListener('resize', setNavOffset);
})();
</script>

Match internal pages: add to advanced theme editor > css and scripts

css

//start of logo over nav

/* ---------- Internal pages: desktop ---------- */
@media (min-width: 1024px) {
/* Cap header, allow overlap */
#page-header {
height: 150px;
overflow: visible;
position: relative;
z-index: 2;
}

/* 200px logo, overlap into nav + tiny bleed onto content */
#page-header .header-logo img {
height: 200px;
display: block;
position: relative;
z-index: 3;
/* 200 - 150 = 50px overlap + bleed var */
margin-bottom: calc(-50px - var(--logo-bleed, 6px));
}

/* Make sure the internal nav sits under the logo */
#page-navigation.navbar {
position: relative;
z-index: 1;
}

/* Push links right by the real logo width (JS sets --logo-w on #page-navigation) */
#page-navigation .nav.navbar-nav.primary-navigation.sl-menu {
margin-left: var(--logo-w, 180px);
}
}

/* ---------- Internal pages: mobile safety net ---------- */
@media (max-width: 500px) {
#page-header {
height: 72px !important;
overflow: hidden !important;
}

#page-header .header-logo img {
height: 56px !important;
max-height: 56px !important;
width: auto !important;
margin: 0 !important;
display: block !important;
}

/* Reset nav offset (hamburger layout) */
#page-navigation .nav.navbar-nav.primary-navigation.sl-menu {
margin-left: 0 !important;
}
}

//end of logo over nav

add to advanced theme editor > scripts

//start of logo over nav
(function () {
// HOMEPAGE
const homeNav =
document.getElementById('amplify-navigation') ||
document.querySelector('.amplify-navigation');
const homeLogo = document.querySelector('.amplify-header .container h1 img');

// INTERNAL PAGES
const internalNav = document.getElementById('page-navigation');
const internalLogo = document.querySelector('#page-header .header-logo img');

const navs = [homeNav, internalNav].filter(Boolean);
const logos = [homeLogo, internalLogo].filter(Boolean);

if (!navs.length || !logos.length) return;

// consistent bleed everywhere
navs.forEach(nav => nav.style.setProperty('--logo-bleed', '6px'));

function setNavOffsets() {
if (window.innerWidth < 1024) {
navs.forEach(nav => nav.style.removeProperty('--logo-w'));
return;
}

// Map logo widths to the corresponding navs
const pairs = [
[homeLogo, homeNav],
[internalLogo, internalNav]
];

pairs.forEach(([logo, nav]) => {
if (!logo || !nav) return;
const w = Math.ceil(logo.getBoundingClientRect().width);
nav.style.setProperty('--logo-w', w + 'px');
});
}

logos.forEach(logo => {
if (logo && logo.complete) setNavOffsets();
else if (logo) logo.addEventListener('load', setNavOffsets);
});

window.addEventListener('resize', setNavOffsets);
})();
//end of logo over nav