b2主题顶部导航条和子导航春哥固定成58px了,这就很难办了,58px看起来着实有点小气。
所以改为75px了,并且把下拉菜单也美化了下,保留了导航条滚动后的效果。
就是网现在的样子!
具体效果图可以看下图。
效果图:
这种就比较好看了,哈哈,自我感觉良好。
美化代码:
/* * 导航条美化 */ .header-banner { /*隐藏顶部bar*/ display: none!important; } .site-header { height: 75px; margin: 0; } .header { height: 75px; } .header .wrapper { height: 100%; } .site-header-in { box-shadow: none!important; z-index: 10; } .site.up .site-header-in { transform: translate(0,-75px); transition: transform .3s; } .site .site-header-in { transition: transform .3s; } .header .top-style { height: 100%; } .top-style-blur { /*导航条背景颜色*/ background: #206aff; } .top-menu ul li.depth-0 > a { color: #fff; padding: 18px 30px; } .hob { /*去掉底部下划线*/ display: none!important; } .user-tools { /*隐藏顶部用户头像原点*/ background: transparent; } /* * 导航条子菜单下拉美化 */ .has_children .sub-menu { border-radius: 4px; } .top-menu .b2-jt-down { display: none!important; } .top-menu-ul .sub-menu-0 { border-top: 0; padding: 15px; transform: translateY(10px); transition: all .3s; } .top-menu ul li {} .top-menu ul li:hover .sub-menu-0 { transform: translateY(0); } .top-menu-ul .sub-menu-0>li { border-left: 1px solid #ebeef5; position: relative; } .b2-menu-3 .sub-menu-0>li>a { color: #4c4c4c; padding: 8px 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .b2-menu-3 .sub-menu-0>li:after { content: ''; position: absolute; top: 12px; left: -5px; width: 3px; height: 3px; border-radius: 50%; background: #fff; border: 3px solid #3d7eff; } .b2-menu-3 .sub-menu-0>li:nth-child(2n+1):after{ border: 3px solid #f1787f; } .b2-menu-3 .sub-menu-0>li:nth-child(3n+1):after{ border: 3px solid #61e1b9 } .b2-menu-3 .sub-menu-0>li>a:hover { background: #ebeef5; } .b2-menu-3 .sub-menu-0 > li:hover > a, .b2-menu-3 .sub-menu-0 a:hover { color: #333; } .top-user-info .top-user-box { width: 30px; height: 30px; } .top-user-avatar img { border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 50%!important; background: transparent; } .header-login-button button { background: #377aff; } .header-login-button .empty { color: #fff; }