[英]Avada Theme - Submenu customization
I just started using the Avada Theme in my wordpress site. 我刚开始在我的wordpress网站中使用Avada主题 。 I need to customize the menu on the left hand side.
我需要自定义左侧的菜单。 The items in the submenu should be shown below the parent item, not on next to it.
子菜单中的项目应显示在父项目的下方,而不是旁边。 I started by using the side-navigation css styles, but I can't get the child items to work.
我从使用侧面导航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;
}
For better understanding here is a screenshot of what I try to build. 为了更好地理解,这里是我尝试构建的屏幕截图。
The Image on the left shows the current style of the menu / submenu.
左侧的图像显示了菜单/子菜单的当前样式。 The image on the right is showing the side-navigation template which comes with Avada.
右图显示了Avada随附的侧面导航模板。 Out of the Box it's not possible to use the side-navigation style in the main menu.
开箱即用,无法在主菜单中使用侧面导航样式。 I already posted a question in the Theme-Fursion forum, but they were not able to help me.
我已经在主题主题论坛中发布了一个问题,但是他们无法帮助我。 Maybe you can give me a hint.
也许你可以给我一个提示。 Thank you
谢谢
To achieve this effect you would have to change the positioning of the submenu list from absolute
to relative
, and adjust it a bit eg in this way: 为了达到这种效果,您必须将子菜单列表的位置从
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.