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

    Hello,

    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 6 days, 9 hours ago by  indurango.
    • This topic was modified 6 days, 9 hours ago by  indurango.
    • This topic was modified 6 days, 9 hours ago by  indurango.
    • This topic was modified 6 days, 2 hours ago by  indurango.
    #1020651

    Hey Enis,

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

    Best regards,
    Basilis

    #1020653

    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..

    thanks
    Enis

    #1021166

    Hi,

    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 https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

    Best regards,
    Vinay

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

You must be logged in to reply to this topic.