如何修改Begin主题导航高度

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

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

如何修改Begin主题导航高度

操作步骤

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

修改前:

  1. /** 头部 **/
  2. #masthead {
  3.         height120px  /** 修改参数 **/
  4. }
  5. .logo-site, .logo-sites {
  6.         positionrelative;
  7.         floatleft;
  8.         margin18px 0 0 10px;  /** 修改参数 **/
  9.         width220px;
  10.         max-height50px;
  11.         overflowhidden;
  12.         transition-duration: .5s;
  13. }

修改后:

  1. /** 头部 **/
  2. #masthead {
  3.     height100px/** 修改参数 **/
  4. }
  5. .logo-site, .logo-sites {
  6.     positionrelative;
  7.     floatleft;
  8.     margin9px 0 0 10px/** 修改参数 **/
  9.     width220px;
  10.     max-height50px;
  11.     overflowhidden;
  12.     transition-duration: .5s;
  13. }

 

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

修改前:

  1. /*一级样式*/
  2. #site-nav-wrap {
  3.         floatrightright;
  4.         max-width: 70%;
  5. }
  6. #site-nav {}
  7. #site-nav .down-menu li {
  8.         displayblock;
  9.         floatleft;
  10.         height88px;  /** 修改参数 **/
  11.         line-height88px;  /** 修改参数 **/
  12. }
  13. #site-nav .down-menu a {
  14.         padding: 0 10px;
  15.         color#444;
  16.         text-alignleft;
  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.         height89px;  /** 修改参数 **/
  28.         line-height89px;  /** 修改参数 **/
  29.         border-bottom2px solid #3690cf;
  30. }

修改后:

  1. /*一级样式*/
  2. #site-nav-wrap {
  3.     floatleft;
  4.     max-width: 70%;
  5. }
  6. #site-nav {}
  7. #site-nav .down-menu li {
  8.     displayblock;
  9.     floatleft;
  10.     height70px; /** 修改参数 **/
  11.     line-height70px/** 修改参数 **/
  12. }
  13. #site-nav .down-menu a {
  14.     padding: 0 15px;
  15.     color#444;
  16.     text-alignleft;
  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.     height70px; /** 修改参数 **/
  28.     line-height70px; /** 修改参数 **/
  29.     border-bottom2px solid #3690cf;
  30. }

 

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

修改前:

  1. .nav-search {
  2.         font-size16px;
  3.         font-size: 1.6rem;
  4.         floatrightright;
  5.         color#777;
  6.         line-height26px;
  7.         margin30px 5px 0 5px;  /** 修改参数 **/
  8.         padding: 0 8px 3px;
  9.         cursorpointer;
  10. }

修改后:

  1. .nav-search {
  2.     font-size16px;
  3.     font-size: 1.6rem;
  4.     floatrightright;
  5.     color#777;
  6.     line-height26px;
  7.     margin20px 5px 0 5px; /** 修改参数 **/
  8.     padding: 0 8px 3px;
  9.     cursorpointer;
  10. }

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

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

里维斯社
晨会游戏

发表评论

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