这款Begin主题很好用,很多站长也在用这款主题,但是主题样式都千篇一律。有动手能力的博主都会去尝试稍微折腾一下,至少看起来让自己觉得满意。不过再怎么折腾也只是外表的变化,主题的功能还是那么强大。个人不太喜欢主题默认的导航高度,所以今天就来折腾一下,将导航的高度调窄一点。下图是调整后的效果演示:
操作步骤
1、进入主题样式文件,路径/wp-content/themes/begin/style.css,查找/** 头部 **/修改整体高度。
修改前:
- /** 头部 **/
- #masthead {
- height: 120px /** 修改参数 **/
- }
- .logo-site, .logo-sites {
- position: relative;
- float: left;
- margin: 18px 0 0 10px; /** 修改参数 **/
- width: 220px;
- max-height: 50px;
- overflow: hidden;
- transition-duration: .5s;
- }
修改后:
- /** 头部 **/
- #masthead {
- height: 100px; /** 修改参数 **/
- }
- .logo-site, .logo-sites {
- position: relative;
- float: left;
- margin: 9px 0 0 10px; /** 修改参数 **/
- width: 220px;
- max-height: 50px;
- overflow: hidden;
- transition-duration: .5s;
- }
2、查找/*一级样式*/并修改导航高度参数
修改前:
- /*一级样式*/
- #site-nav-wrap {
- float: rightright;
- max-width: 70%;
- }
- #site-nav {}
- #site-nav .down-menu li {
- display: block;
- float: left;
- height: 88px; /** 修改参数 **/
- line-height: 88px; /** 修改参数 **/
- }
- #site-nav .down-menu a {
- padding: 0 10px;
- color: #444;
- text-align: left;
- transition-duration: .2s;
- }
- #site-nav .sub-menu {}
- #site-nav .down-menu > li > a:hover,
- #site-nav .down-menu > li.sfHover > a {
- color: #fff !important;
- background: #3690cf;
- }
- #site-nav .down-menu > .current-menu-item > a{
- color: #444;
- height: 89px; /** 修改参数 **/
- line-height: 89px; /** 修改参数 **/
- border-bottom: 2px solid #3690cf;
- }
修改后:
- /*一级样式*/
- #site-nav-wrap {
- float: left;
- max-width: 70%;
- }
- #site-nav {}
- #site-nav .down-menu li {
- display: block;
- float: left;
- height: 70px; /** 修改参数 **/
- line-height: 70px; /** 修改参数 **/
- }
- #site-nav .down-menu a {
- padding: 0 15px;
- color: #444;
- text-align: left;
- transition-duration: .2s;
- }
- #site-nav .sub-menu {}
- #site-nav .down-menu > li > a:hover,
- #site-nav .down-menu > li.sfHover > a {
- color: #fff !important;
- background: #3690cf;
- }
- #site-nav .down-menu > .current-menu-item > a{
- color: #444;
- height: 70px; /** 修改参数 **/
- line-height: 70px; /** 修改参数 **/
- border-bottom: 2px solid #3690cf;
- }
3、搜索/** 管理 **/并修改搜索菜单高度
修改前:
- .nav-search {
- font-size: 16px;
- font-size: 1.6rem;
- float: rightright;
- color: #777;
- line-height: 26px;
- margin: 30px 5px 0 5px; /** 修改参数 **/
- padding: 0 8px 3px;
- cursor: pointer;
- }
修改后:
- .nav-search {
- font-size: 16px;
- font-size: 1.6rem;
- float: rightright;
- color: #777;
- line-height: 26px;
- margin: 20px 5px 0 5px; /** 修改参数 **/
- padding: 0 8px 3px;
- cursor: pointer;
- }
至此,就已经修改完成了,效果就是文章开头截图中的效果。大家可以灵活根据自己需要来调整导航核实的高度,只要让自己看着舒服就可以了。
©里维斯社,本站推荐使用的主机:阿里云、腾讯云;本站推荐使用的WP主题:WordPress主题