創建全局標頭時，需要考慮許多事項。您放置在標題中的元素需要幫助訪問者輕松導航。為了減少人們花在導航上的時間，許多Web設計師選擇固定的頂部標題，以允許訪問者立即轉到其他頁面或帖子。這確實很方便，但是在創建固定的標頭時，會占用訪問者視口高度的很大一部分，從而允許一次顯示較少的內容。如果您不愿意做出這種犧牲，請知道您不必這樣做。通過允許全局標頭顯示訪問者何時向上滾動并在訪客向下滾動時隱藏全局標題，您可以享受固定標頭的好處。今天，我們將指導您使用Divi的主題生成器隱藏和顯示全局標題。

讓我們開始吧。

預習

在深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動

1.轉到Divi Theme Builder并添加新模板

轉到Divi Theme Builder

首先轉到Divi Theme Builder。

開始建立全球標題

在那里，單擊“添加全局標題”，然后選擇“構建全局標題”。

2.開始構建全局頭

區域設置

背景顏色

在模板編輯器中，您會注意到一個部分。打開該部分并更改其背景顏色。

背景顏色：#ffffff

漿紗

轉到設計選項卡，然后為您的部分分配100％的寬度。

寬度：100％

間距

也添加一些自定義的頂部和底部填充。

最高填充：2vw

底部填充：2vw

框影

我們還將對我們的部分應用微妙的陰影。

方塊陰影模糊強度：50像素

陰影顏色：rgba(0,0,0,0.08)

CSS ID

在本教程的后面，我們將需要一些自定義代碼來實現滾動效果。為此，我們在該部分添加了CSS ID。

CSS ID：global-header-section

主要元素

通過將兩行CSS代碼添加到該部分的主元素，我們還將該部分變成固定的頭部。

Z指數

現在，為確保我們的部分出現在所有頁面或帖子內容的頂部，我們還將在可見性設置中增加z索引。

Z索引：99999

添加新行

列結構

完成所有部分的設置后，請使用以下列結構在該部分中添加新行：

漿紗

尚未添加任何模塊，請打開行設置，并允許該行占用屏幕的整個寬度。

使用自定義裝訂線寬度：是

裝訂線寬度：1

均衡柱高：是

寬度：100％

最大寬度：100％

間距

還要刪除所有默認的頂部和底部填充。

最高填充：0px

底部填充：0px

主要元素

通過在行的主要元素中添加兩行CSS代碼，使列內容居中，并允許列在較小的屏幕尺寸上彼此相鄰。

將社交媒體關注模塊添加到第2列

添加社交網絡

是時候添加模塊了，從第1列的“社交媒體關注模塊”開始。添加要顯示的社交網絡。

重置個人社交網絡樣式

通過在單個級別上重置每個社交網絡的樣式來繼續。

添加個人社交網絡間距

您還需要分別打開每個社交網絡的設置，并在間距設置中添加底部填充。

底部填充：0.5vw

對準

將底部填充單獨添加到每個社交網絡后，請返回常規模塊設置。轉到設計選項卡，然后更改模塊對齊方式。

模塊對齊：居中

默認圖標設置

也可以在圖標設置中更改圖標顏色。

圖標顏色：＃000000

懸停圖標設置

并在懸停時修改圖標顏色。

圖標顏色：＃c2ab92

邊境

通過在邊框設置中添加底部邊框來完成模塊的設置。

底邊框寬度：1px

底部邊框顏色：＃000000

將菜單模塊添加到第2列

選擇菜單

進入下一篇專欄！添加菜單模塊，然后選擇所需的菜單。

上傳徽標

接下來將徽標上傳到模塊。

移除背景色

并刪除背景色。

布局

然后，轉到設計選項卡，并確保以下設置適用于布局：

風格：居中

下拉菜單方向：向下

默認菜單文字

繼續更改菜單文本設置，如下所示：

活動鏈接顏色：＃c2ab92

菜單字體：Cor

文字顏色：＃000000

菜單文字大小：1vw(臺式機)，2vw(平板電腦)，3vw(電話)

懸停菜單文本

修改懸停菜單文本。

菜單文字顏色：＃c2ab92

下拉式菜單

接下來，在下拉菜單設置中更改下拉菜單的行顏色。

下拉菜單行顏色：＃000000

圖示

我們也在圖標設置中更改了漢堡菜單圖標的顏色。

漢堡菜單圖標顏色：＃000000

漿紗

在大小調整設置中，跨不同屏幕尺寸更改徽標最大寬度，以繼續。

徽標最大寬度：5vw(臺式機)，10vw(平板電腦)，13vw(電話)

菜單鏈接CSS

并通過在高級選項卡中的模塊菜單鏈接中添加兩行CSS代碼來完成模塊的設置。

將文本模塊添加到第3列

添加副本

進入最后一個模塊！在那里，我們唯一需要的模塊是文本模塊。

添加鏈接

該模塊將用作CTA。添加您選擇的鏈接。

模塊鏈接URL：＃

默認文字設置

轉到模塊的設計選項卡，并相應地更改文本設置：

文字字體：Cor Garamond

文字顏色：＃000000

文字大小：1vw(臺式機)，2vw(平板電腦)，3vw(電話)

懸停文字設定

懸停時更改文本顏色。

文字顏色：＃c2ab92

漿紗

通過在不同屏幕尺寸上更改模塊的大小設置來繼續。

寬度：12vw(臺式機)，18vw(平板電腦)，22vw(電話)

模塊對齊：居中

間距

并在間距設置中添加一些底部填充。

底部填充：0.5vw

邊境

通過添加底部邊框完成模塊的設置。

底邊框寬度：1px

底部邊框顏色：＃000000

將代碼模塊添加到第2列

插入JQuery和CSS代碼

在為行中的所有模塊設置樣式之后，就該使顯示/隱藏效果發生了。為此，我們需要向代碼模塊中添加一些自定義代碼，并將其放置在第2列中。無論您如何設計標題或使用什么模塊，此代碼都可以在您添加的任何部分上使用。確保已將CSS ID添加到您的部分。如下圖所示，將JQuery代碼放在腳本標簽之間，將CSS代碼放在樣式標簽之間。

3.保存構建器更改并查看結果

完成全局標題后，保存所有更改并在您的網站上查看結果！

預習

現在我們已經完成了所有步驟，讓我們最后看一下不同屏幕尺寸的結果。

桌面

移動

總結

以上是生活随笔為你收集整理的html背景音乐如何隐藏控件菜单栏,【Divi主题教程】divi主题如何设置顶部菜单栏滚动是进行隐藏...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。