如何修改Begin主题导航高度

2018年12月18日11:19:25 发表评论

这款Begin主题很好用，很多站长也在用这款主题，但是主题样式都千篇一律。有动手能力的博主都会去尝试稍微折腾一下，至少看起来让自己觉得满意。不过再怎么折腾也只是外表的变化，主题的功能还是那么强大。个人不太喜欢主题默认的导航高度，所以今天就来折腾一下，将导航的高度调窄一点。下图是调整后的效果演示：

如何修改Begin主题导航高度

操作步骤

1、进入主题样式文件，路径/wp-content/themes/begin/style.css，查找/** 头部 **/修改整体高度。

修改前：

  1. /** 头部 **/
  2. #masthead {
  3.         height: 120px  /** 修改参数 **/
  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. }

修改后：

  1. /** 头部 **/
  2. #masthead {
  3.     height: 100px; /** 修改参数 **/
  4. }
  6. .logo-site, .logo-sites {
  7.     position: relative;
  8.     float: left;
  9.     margin: 9px 0 0 10px; /** 修改参数 **/
  10.     width: 220px;
  11.     max-height: 50px;
  12.     overflow: hidden;
  13.     transition-duration: .5s;
  14. }

 

2、查找/*一级样式*/并修改导航高度参数

修改前：

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

修改后：

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

 

3、搜索/** 管理 **/并修改搜索菜单高度

修改前：

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

修改后：

  1. .nav-search {
  2.     font-size: 16px;
  3.     font-size: 1.6rem;
  4.     float: rightright;
  5.     color: #777;
  6.     line-height: 26px;
  7.     margin: 20px 5px 0 5px; /** 修改参数 **/
  8.     padding: 0 8px 3px;
  9.     cursor: pointer;
  10. }

至此，就已经修改完成了，效果就是文章开头截图中的效果。大家可以灵活根据自己需要来调整导航核实的高度，只要让自己看着舒服就可以了。

©里维斯社，本站推荐使用的主机：阿里云、腾讯云；本站推荐使用的WP主题：WordPress主题

里维斯社
晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: