最近在折騰WordPress的主題,裝了一個《Kratos》,上方的菜單欄效果想調(diào)整一下,后臺沒得直接修改,又不會折騰代碼,還是上來請教一下吧,主題效果如下圖:
現(xiàn)在有兩個問題:
如何把電腦版上方的菜單調(diào)到左對齊呢,現(xiàn)在默認(rèn)的是右對齊的。
二級菜單如何做到鼠標(biāo)移過去就自動展開呢?
要將電腦版上方的菜單調(diào)整為左對齊,您可以通過添加自定義CSS來實現(xiàn)。請按照以下步驟操作: 登錄WordPress后臺,進入“外觀”->“編輯器”,找到Kratos主題的style.css文件。 在文件底部添加以下代碼:??
@media?screen?and?(min-width:?992px)?{??.navbar-nav?{????float:?left;??}?}
這將使菜單在屏幕寬度大于992像素時左對齊。 要使二級菜單在鼠標(biāo)移過去時自動展開,您可以使用jQuery來添加事件處理程序。請按照以下步驟操作: 在WordPress后臺中,進入“外觀”->“編輯器”,找到Kratos主題的header.php文件。 在文件底部添加以下代碼:?
<script>??jQuery(document).ready(function($)?{??? ?$('.dropdown').hover(function()?{????? ??$(this).addClass('open');?? ????},?function()?{??? ???????$(this).removeClass('open');? ??????});? ???}); </script>
這將在頁面加載時添加一個事件處理程序,當(dāng)鼠標(biāo)懸停在下拉菜單上時,它將添加“open”類,從而展開下拉菜單。當(dāng)鼠標(biāo)移開時,它將刪除“open”類,從而收起下拉菜單。 請注意,如果您不熟悉CSS和jQuery,最好在修改代碼之前備份文件,并在修改后測試所有更改,以確保它們按預(yù)期工作。