如何在 Divi 中获得一个固定的移动菜单，以在 CSS 和可能 jQuery 的滚动条上更改颜色？

Question

我已经开始了，并且有一个可以正常工作的固定移动菜单，带有 0.4 秒的缓动过渡，也降低了滚动高度。

到目前为止 CSS.

全部完成

我尝试在代码底部添加一个背景色过渡，但那一点对我不起作用。

当前转换正在尝试修改 .et_mobile_menu，但我已经尝试将其设为 #mobile_menu 和 #et-top-navigation - 均无效。

我已经处理了几天了，但无济于事。任何关于如何做到这一点的说明都会很棒，已经非常彻底地搜索了论坛。

实时站点：Intech Tools

CSS:

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
    /* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width: 980px){
  .et_header_style_left .et_fixed_header .et_mobile_menu {
     background-color: #f9c13a !important;
   }
      /* transition menu colour */
  .et_header_style_left .et_mobile_menu {
        -webkit-transition: background-color 0.4s ease;
        -o-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
  }
}

Answer 1

由 CSS 忍者解决：Dwayne de Clercq
在 Facebook 组上：Wordpress 开发人员和网页设计师。

魔术 CSS 是：

@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}

为缩小和颜色变化的固定移动菜单制作最终的完整工作代码：

CSS

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
/* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}

如何在 Divi 中获得一个固定的移动菜单，以在 CSS 和可能 jQuery 的滚动条上更改颜色？

How to get a Fixed mobile menu in Divi to change colour on scroll with CSS and possibly jQuery?

css

mobile-website

menubar

jquery-mobile-navbar

divi-theme