[英]Avada Theme - Submenu customization
我剛開始在我的wordpress網站中使用Avada主題 。 我需要自定義左側的菜單。 子菜單中的項目應顯示在父項目的下方,而不是旁邊。 我從使用側面導航css樣式開始,但是我無法使子項起作用。
.side-nav {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #ededed;
margin-bottom: 20px;
}
.side-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-nav li {
margin: 0;
padding: 0;
}
.side-nav li a {
border-bottom: 1px solid #ededed;
display: block;
height: auto;
font-weight: normal;
font: 14px/39px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
color: #333333;
}
.side-nav li a {
line-height: 1.69em;
padding: 8px 0;
}
.side-nav li a:hover {
background: none;
}
.side-nav li.current_page_item > a {
background: none;
color: #a0ce4e;
}
.side-nav li.current_page_item li a {
color: #333333;
border-bottom: 1px solid #ededed;
}
.side-nav .children {
display: none;
margin-left: 15px;
}
.side-nav .arrow {
display: inline;
margin-left: 0;
}
.side-nav .arrow:after {
position: absolute;
font-size: 14px;
font-family: IcoMoon;
}
.side-nav-left .side-nav {
border-right: 1px solid #ededed;
}
.side-nav-left .side-nav li.current_page_item > a {
border-right: 3px solid #a0ce4e;
}
.side-nav-left .side-nav .arrow {
margin-left: 10px;
}
.side-nav-left .side-nav .arrow:after {
content: '\f105';
}
.side-nav-right .side-nav {
border-left: 1px solid #ededed;
}
.side-nav-right .side-nav li.current_page_item > a {
padding-left: 23px;
border-left: 3px solid #a0ce4e;
}
.side-nav-right .side-nav li a {
padding-left: 25px;
}
.side-nav-right .side-nav .arrow {
margin-right: 10px;
}
.side-nav-right .side-nav .arrow:after {
content: '\f104';
}
.side-nav-right .side-nav .children {
margin-left: 40px;
}
.side-nav-right .side-nav .children a {
padding-left: 0;
}
為了更好地理解,這里是我嘗試構建的屏幕截圖。 左側的圖像顯示了菜單/子菜單的當前樣式。 右圖顯示了Avada隨附的側面導航模板。 開箱即用,無法在主菜單中使用側面導航樣式。 我已經在主題主題論壇中發布了一個問題,但是他們無法幫助我。 也許你可以給我一個提示。 謝謝
為了達到這種效果,您必須將子菜單列表的位置從absolute
更改為relative
,並進行如下調整:
body.side-header-left #side-header #nav > ul > li > ul.sub-menu {
position: relative;
right: auto;
left: auto;
top: auto;
visibility: visible;
opacity: 1;
width: 100%;
height: 0;
overflow:hidden;
}
body.side-header-left #side-header #nav > ul > li:hover > ul.sub-menu,
body.side-header-left #side-header #nav > ul > li.current_page_item > ul.sub-menu {
height: auto;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.