> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 【官網設計】Essence & Muse 主題如何設定 Logo 置中，導航列位於 Logo 下方的中間位置

如果你是使用 Essence & Muse 主題，可是你想 Logo 放在正中間，導航選單排在 Logo 下面，整體對齊在中間，讓畫面看起來對稱、簡潔。你可參考這篇文章設定。

| EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。

### 正常情況：

正常情況下，Essence & Muse 主題設定 Logo 置中後，導航列會被擠在左側。


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_s2cv2f.png)

### 設定後結果：

設定後， Logo 置中，導航選單排在 Logo 下面

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1d4nfmd.png)



---

# 設定步驟

1. 前往佈景主題 > 編輯原始碼 > assets  > base.css 文件

2. 複製以下代碼


```
@media screen and (min-width: 990px) {
    .header.header--has-menu {
        grid-template-areas:
        '- heading icons'
        'navigation navigation navigation';
    }
    .header .header__inline-menu {
        margin: 10px auto;
    }
}
```

3. 貼在 base.css 文件最下方


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1clxp2o.png)

4. 點擊儲存，完成！


---

如果你想把搜尋、帳號、購物車圖標與導航列對齊，你可把替換以上代碼至下方代碼


```
@media screen and (min-width: 990px) {
    .header.header--has-menu {
        grid-template-areas:
        '. heading .'
        '. navigation icons';
        grid-template-columns: 1fr 3fr 1fr;
    }
    .header .header__inline-menu {
        margin: 5px auto 0px;
    }
}
```


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1t10wvo.png)

### 設定結果：



![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_a040p4.png)