Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1019951


    I am using a sticky transparent header and when scrolled it turns into semi-transparent color I choosed.. In my page layout; in ”Header visibility and transparency” options : Transparent Header is selected.
    This works perfect in desktop.

    But in mobile view, I can not achieve this..

    Currently in mobile, I can achieve full transparent header with this code only :

    @media only screen and (max-width: 767px) {
    .header_color .header_bg {
        background-color: rgba(0, 0, 0, 0.0) !important; 

    As soon as I remove this code, I see a gray background behind header. And I looked so many solutions here and none worked for me.
    The sticky header acts fine when scrolled with semi-transparent color I choose.. But when not scrolled there is a gray background in header..

    When I examined the code with chrome inspector, I realized that gray background comes from the below code.
    And if I disable – position: static; – the gray background disappears.

    @media only screen and (max-width: 767px)
    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px !important;
        float: none;
        padding: 0;
        border: none;
        width: 80%;

    How can I remove that gray background and have transparent header and when scrolled it turns in to semi-transparent color I choose (which works fine at the moment).

    Update :

    I also realized that, my enfold_child css is not overwriting the styles generated by theme in dynamic_avia folder inside upload.
    No matter what I do, the styles inside dynamic_avia folder is showing.

    • This topic was modified 9 months, 1 week ago by  indurango.

    Hey Enis,

    I have changed the folder to 775, can you please check now if everything is looking good?

    Best regards,


    Hello Basilis,

    No change.. Still gray background when NOT scrolled..

    When scrolled things are OK.

    Currently I have the below css for mobile header :

    @media only screen and (max-width: 767px) {
    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: -82 !important;
    @media only screen and (max-width: 767px) {
    #top #wrap_all .header_color .header_bg .av_header_transparency  {
        background: transparent;
        position: absolute!important;

    And there is still gray background behind the header area in mobile..




    To get a transparent header on mobile please add the below code

     @media only screen and (max-width: 767px) { 
    #top #wrap_all .av_header_transparency, 
    .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;

    For code snippets and tutorials please check and bookmark

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.