知更鸟主题begin5.2导航高度修改教程

河边草

做个笔记，开始用这个主题的时候，导航虽然下拉的时候可以隐藏，但还是觉得高度还是太高了，决定吧高度变小一点。
第一步，打开主题样式文件：
路径/wp-content/themes/begin/style.css

第二部，用编辑软件Dreamweaver打开
查找修改/** 头部 **/整体高度：

1. #masthead {
   
2.         height: 120px
   
3. }
   
4. 
   
5. .logo-site, .logo-sites {
   
6.         position: relative;
   
7.         float: left;
   
8.         margin: 18px 0 0 10px;
   
9.         width: 220px;
   
10.         max-height: 50px;
    
11.         overflow: hidden;
    
12.         transition-duration: .5s;
    
13. }

复制代码

修改为（主要修改120PX和18PX这两个参数）：

1. #masthead {
   
2.         height: 92px;
   
3. }
   
4. 
   
5. .logo-site, .logo-sites {
   
6.         position: relative;
   
7.         float: left;
   
8.         margin: 7px 0 0 10px;
   
9.         width: 220px;
   
10.         max-height: 50px;
    
11.         overflow: hidden;
    
12.         transition-duration: .5s;
    
13. }

复制代码

继续查找/*一级样式*/

1. #site-nav-wrap {
   
2.         float: right;
   
3.         max-width: 70%;
   
4. }
   
5. 
   
6. #site-nav {}
   
7. 
   
8. #site-nav .down-menu li {
   
9.         display: block;
   
10.         float: left;
    
11.         height: 88px;
    
12.         line-height: 88px;
    
13. }
    
14. 
    
15. #site-nav .down-menu a {
    
16.         padding: 0 10px;
    
17.         color: #444;
    
18.         text-align: left;
    
19.         transition-duration: .2s;
    
20. }
    
21. 
    
22. #site-nav .sub-menu {}
    
23. 
    
24. #site-nav .down-menu > li > a:hover,
    
25. #site-nav .down-menu > li.sfHover > a {
    
26.         color: #fff !important;
    
27.         background: #3690cf;
    
28. }
    
29. 
    
30. #site-nav .down-menu > .current-menu-item > a{
    
31.         color: #444;
    
32.         height: 89px;
    
33.         line-height: 89px;
    
34.         border-bottom: 2px solid #3690cf;
    
35. }

复制代码

修改为（这里主要修改88PX和89PX这四个参数）：

1. #site-nav-wrap {
   
2.         float: right;
   
3.         max-width: 70%;
   
4. }
   
5. 
   
6. #site-nav {}
   
7. 
   
8. #site-nav .down-menu li {
   
9.         display: block;
   
10.         float: left;
    
11.         height: 60px;
    
12.         line-height: 60px;
    
13. }
    
14. 
    
15. #site-nav .down-menu a {
    
16.         padding: 0 10px;
    
17.         color: #444;
    
18.         text-align: left;
    
19.         transition-duration: .2s;
    
20. }
    
21. 
    
22. #site-nav .sub-menu {}
    
23. 
    
24. #site-nav .down-menu > li > a:hover,
    
25. #site-nav .down-menu > li.sfHover > a {
    
26.         color: #fff !important;
    
27.         background: #3690cf;
    
28. }
    
29. 
    
30. #site-nav .down-menu > .current-menu-item > a{
    
31.         color: #444;
    
32.         height: 60px;
    
33.         line-height: 60px;
    
34.         border-bottom: 2px solid #3690cf;
    
35. }

复制代码

继续修改搜索菜单高度/** 管理 **/

1. .nav-search {
   
2.         font-size: 16px;
   
3.         font-size: 1.6rem;
   
4.         float: right;
   
5.         color: #777;
   
6.         line-height: 26px;
   
7.         margin: 30px 5px 0 5px;
   
8.         padding: 0 8px 3px;
   
9.         cursor: pointer;
   
10. }

复制代码

修改为（这里主要修改margin: 30px这个参数）

1. .nav-search {
   
2.         font-size: 16px;
   
3.         font-size: 1.6rem;
   
4.         float: right;
   
5.         color: #777;
   
6.         line-height: 26px;
   
7.         margin: 17px 5px 0 5px;
   
8.         padding: 0 8px 3px;
   
9.         cursor: pointer;
   
10. }

复制代码

好了，到这里基本完成了，大家可以根据自己的需要修改!