10.64K viewsGeneratePress
0

generatepress主题如何设置mega menu?

0

Generatepress 主题默认并没有Mega menu的设置选项,如果需要这个功能,可以添加以下代码到style.css:

nav .main-nav .mega-menu {
	position: static;
}

nav .main-nav .mega-menu > ul {
	position: absolute;
	width: 100%;
}

nav .main-nav .mega-menu > ul > li > a {
	font-weight: bold;
}

nav .main-nav .mega-menu>ul>li {
	display: inline-block;
	width: 25%;
	vertical-align: top;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
	width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
	width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
	width: 20%;
}

nav .main-nav .mega-menu > ul > li > a:hover,
nav .main-nav .mega-menu > ul > li > a:focus,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
	background-color: transparent !important;
}

nav .main-nav .mega-menu ul .sub-menu {
	position: static;
	display: block !important;
	opacity: 1 !important;
	width: 100%;
	box-shadow: 0 0 0;
}

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
	display: none;
}

@media (max-width: 768px) {
	nav .mega-menu>ul>li {
		display: block;
		width: 100% !important;
	}
        nav .main-nav .mega-menu > ul {
                position: relative;
        }
}

添加完成之后,转到外观-菜单面板,拖拽设置好菜单层级父子关系
mega-menu

然后在该顶级菜单添加一个CSS Classes:mega-menu
如果你的设置选项中没有CSS Classes,可以在screen options中添加:
options for CSS classes
保存刷新,默认为4栏

如果你只需要2栏或3栏,可以在添加mega-menu mega-menu-col-3到CSS Classes
设置栏数代码:

mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5