Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 11, 2017 at 3:26 am #875419
    WP Turned UP

    Hello. I received the following and implemented on multiple sites where the header is set to Transparent. It works great

    I’d like to apply the same tactic, but this time targeting pages set to Transparent & Glassy Header.

    /***ENFOLD – SETS BACKGROUND TO TRANSPARENT FOR DEVICES SMALLER THAN IPAD PORTRAIT***/
    @media only screen and (max-width: 767px) {
    .html_header_scrolldown.responsive #top #wrap_all #header.av_header_scrolldown.av_header_transparency {
    opacity: 0;
    margin-top: -250px !important;
    }

    .html_header_scrolldown.responsive #top #wrap_all #header {
    position: fixed;
    top: 0;
    }
    }

    Thank you,
    Ryan

    November 13, 2017 at 8:08 pm #876245
    Basilis

    Hey accurIT,

    To the site you have send us, the Class is the same.
    Are you using a different selection or you want the code first?

    Best regards,
    Basilis

    November 13, 2017 at 8:16 pm #876254
    WP Turned UP

    I’ve included the site where the code was recently given, to fix this same issue.

    November 14, 2017 at 4:36 pm #876651
    Victoria

    Hi Ryan,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (max-width: 479px) {
.responsive #top #main {
    margin-top: -92px ;
}
.responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    padding-right: 0;
    margin-right: 0;
}
#menu-item-shop .cart_dropdown_link {
    padding: 0 10px 0 60px !important;
}
.responsive #top #wrap_all .flex_column.avia-builder-el-1 {
      margin-top: 60px;
}

.av-special-heading.av-special-heading-h1.custom-color-heading.avia-builder-el-2 {
      padding-bottom: 0px !important;
}
#top.page-id-504 #av_section_1 .av-special-heading .av-special-heading-tag {
    padding-top: 100px;
}
#top #wrap_all .av_header_transparency {
    background-color: transparent;
}
}
@media only screen and (max-width: 767px) {
  .responsive #top #main {
      margin-top: -92px;
  }
  #top #wrap_all .av_header_transparency, #top #wrap_all #header_main {
      background-color: transparent !important;
  }
  .av-special-heading.av-special-heading-h1.custom-color-heading.avia-builder-el-2 {
        padding-bottom: 0px !important;
  }

  #top.page-id-504 #av_section_1 .av-special-heading .av-special-heading-tag {
      padding-top: 110px !important;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 14, 2017 at 4:51 pm #876664
    WP Turned UP

    Hello. Thanks, but this sets it to be fully transparent. I’d like the Glassy Transparent across all devices sizes.

    November 16, 2017 at 9:55 pm #877768
    Basilis

    Hi,

    can you explain what you mean ” glassy “?
    What color should it be, or how it should look?

    Best regards,
    Basilis

    November 16, 2017 at 10:08 pm #877772
    WP Turned UP

    If you look at the desktop version, that should show you all you need to know. I want to replicate that look across all devices.

    November 17, 2017 at 3:00 pm #878086
    Victoria

    Hi Ryan,

    So just change this part
    Image 2017-11-17 at 14.59.59.png
    in the code above to be the color you want.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 17, 2017 at 3:34 pm #878120
    WP Turned UP

    Hi. Almost there. Not sure why the Enfold > Header > Transparency settings aren’t kicking in. Please see image. Thanks!

    November 17, 2017 at 6:16 pm #878229
    Victoria

    Hi Ryan,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top  .av_header_transparency .logo img.alternate {
    opacity: 1;
    display: block;
  }
  .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
      opacity: 0;
  }
  #menu-item-shop {
    color: #fff;
  }
  .av-burger-menu-main.menu-item-avia-special .av-hamburger-inner,
  .av-burger-menu-main.menu-item-avia-special  .av-hamburger-inner::before,
  .av-burger-menu-main.menu-item-avia-special  .av-hamburger-inner::after {
    color: #fff;
    background-color: #fff;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 17, 2017 at 6:23 pm #878233
    WP Turned UP

    That produces the following. I’d really like to avoid all of this CSS, for what should just work according to the settings in Enfold > Header. Why aren’t those settings working?

    November 22, 2017 at 3:33 am #879989
    Ismael

    Hi,

    Are you sure that you added the css code correctly? The css modification above should remove the “black logo”.

    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0;
 }

    Best regards,
    Ismael

    November 22, 2017 at 2:30 pm #880274
    WP Turned UP

    We’re good to go here. Appreciate the help.

    Is there a place we can go to submit, vote and see the progress of feature requests?

    November 24, 2017 at 5:48 am #881053
    Ismael

    Hi,

    You can find the feature request page here. https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.