修復了 header 與移動內容的下拉菜單

Question

這是未修復時會發生的情況，這是我想要的行為，但我希望修復導航欄

修復后會發生以下情況：它不會移動內容（它位於此下拉列表的后面）

// scss for the nav
.filterbar {
    position: fixed;
    top: 0;
    box-shadow: 0 0 15px black;
    width: 100%;
// for info section
.filters-info {
    margin-top: 110px;
    display: flex;
    justify-content: space-between;
}

如何解決這個問題？ （margin-bottom 沒有幫助）。 我有兩個想法： 1. 獲取 toggleFilterbar 道具並基於此更改樣式 2. 使導航 position 絕對，然后將其更改為固定。 但是，我想必須有一個更簡單的 css 方法來解決這個問題

Answer 1

給position:relative; 到.filters-info

和

替換margin-top: 110px; 到top: 110px;