# Dawnテーマで告知バーを固定せずにヘッダー固定

**URL:** <https://community.shopify.com/t/dawn/330953>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 12, 2024, 5:02am UTC](https://community.shopify.com/t/dawn/330953 "2024-06-12T05:02:29Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

Dawnテーマでヘッダーの固定・透過を実装した際の問題について質問しています。

**実装内容:**
- 参照記事に従ってヘッダー固定・透過を設定
- スクロール時に告知バー部分が畳まれ、ヘッダーが最上部に固定される仕様

**発生している問題:**
告知バーを最上部に表示させた場合、告知バー相当の空白部分ができた状態でヘッダーが固定されてしまう

現在、この空白問題の解決方法を探している状況です。

<div class="post-metadata">

**Author:** ![ryosuke4762](https://avatars.discourse-cdn.com/v4/letter/r/51bf81/32.png) [@ryosuke4762](https://community.shopify.com/u/ryosuke4762)\
**Post date:** [June 12, 2024, 5:02am UTC](https://community.shopify.com/t/dawn/330953/1 "2024-06-12T05:02:29Z")

</div>

こちらの記事の通りに、Dawnテーマでヘッダー固定・透過の実装を行いました。

[https://note.com/tech\_malin/n/n790fe984404b#18485e3c-a4d7-400c-b16e-cb33319030aa](https://note.com/tech_malin/n/n790fe984404b#18485e3c-a4d7-400c-b16e-cb33319030aa)

一方で、告知バーを最上部に表示させた場合に、告知バーに相当する部分が空白になった状態でヘッダーが固定されてしまいます。

スクロールした際に告知バー部分が畳まれて、ヘッダーが最上部に固定されるようにしたいのですがどのようにすればいいでしょうか