演示地址:
修改说明:
1、修改了主导航的高度为55px;
2、添加了主导航背景阴影;
3、修改了鼠标划过 变化颜色和选中颜色。
修改教程:
1、进入网站后台
2、找到【外观】==》【主题选项】==》【定制风格】
3、找到【自定义样式】,添加以下代码
/*主导航样式*/ #site-nav .down-menu>li>a:hover, #site-nav .down-menu>li.sfHover>a { color: #38a3fd !important; background: transparent; } #site-nav .down-menu>.current-menu-item>a, #site-nav .down-menu>.current-post-ancestor>a { background: transparent; color: #38a3fd !important; } #site-nav .down-menu>.current-menu-item>a:hover { color: #fff } /*主导航背景色*/ #menu-container { background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04); } /*主导航高度*/ #menu-container { height: 55px; } #masthead { /** 控制头部整个高度 **/ height: 88px; } .logo-site, .logo-sites { /** 控制LOGO的上边距 **/ margin: 2px 0 0 0; } #site-nav .down-menu li { /** 控制主要菜单高度 **/ height: 55px; line-height: 55px; } .nav-search { /** 控制搜索按钮上边距 **/ margin: 15px 0px 0 10px; } @media only screen and (max-width: 900px) { #menu-container { height: 40px; } #masthead { height: 40px; } #menu-box { height: 40px; } .logo-site, .logo-sites { margin: 2px 0 0 10px; } .nav-search { margin: 5px 10px 0 0; } }