Header not being full width (Dawn Theme, Custom Code)

[getbodyfuel]

I’ve made custom changes to my header, including a custom transparent design and search bar modifications. However, I’ve noticed that my header is not full (on mobile, max width is like 410px) width only on the homepage, while it displays correctly on other pages (like the product page).

What I’ve Tried:

• I checked header.liquid, but I couldn’t find page-width explicitly being used.

• I applied CSS like:

  .template-index .header-wrapper, .template-index .header { width: 100vw !important; max-width: 100% !important; }

  But it didn’t fix the issue.

• I inspected the homepage header vs. the product page header and couldn’t find a clear reason for the width restriction.

What could be causing the homepage header to have a restricted width, while it works fine on other pages? Could it be a theme setting, parent container, or Liquid condition I’m missing?

Changes I made:
https://www.youtube.com/watch?v=ak21zL1MhPI Search bar (changed a little code bcs it was outdated (for icons)

https://www.youtube.com/watch?v=J2Kaj4TlHt8 Transparent header
I have also made some changes to icons.

My store page:
https://q0p3zs-fq.myshopify.com/

[Ninthony]

It’s your sticky-header element, you need to set it to width: 100% if you’re using absolute positioning

sticky-header.header-wrapper {
    width: 100%;
}

The difference that I’m seeing is the position on the product page is set to relative from your base.css file:

And on the homepage you’ve got some styles setting the position to absolute with an important flag:

You can either find that and change it to relative and it will take up the full space, or you need to set that element’s width to 100% as outlined above.

[getbodyfuel]

Thanks boss, you are the best!!!