home header mobile transparent - Support | Kriesi.at

Hi Manuela,

Please refer to this: https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

Best regards,
Rikard

June 13, 2022 at 10:06 pm #1355097

Hi,
I followed the suggested guide, but I still have problems.
The page is: https://leagrowingpeople.com/services/the-great-leader/
I use the full screen also in the home, but I don’t have any problem.
Thanks for your continued support,

This reply was modified 2 years, 6 months ago by famarinu.

June 14, 2022 at 11:32 am #1355142

Hi,

Please try this CSS as well:

@media only screen and (max-width: 767px) {
.postid-5426 #main {
    margin-top: 0;
}
}

Best regards,
Rikard

June 14, 2022 at 11:57 am #1355147

Hi,
I added it but nothing changed. I clean the cache, but nothing.
Thank you for your support,
Manuela

June 14, 2022 at 2:19 pm #1355191

Hi,

Try this instead:

@media only screen and (max-width: 767px) {
.postid-5426 #main {
    margin-top: 0 !important;
}
}

Best regards,
Rikard

June 15, 2022 at 8:59 pm #1355397

Hi,
I tried it but it doesn’t work.
I also clean the cache.
And one more thing, it should be something that I can use for all my services and not just this page. So I would be looking for something more flexible.
Also, I don’t understand why I don’t have this problem in the home page.
Thanks for the support,
Manuela

June 16, 2022 at 10:03 am #1355451

Hi,

You removed the last t from important. I’ve edited the CSS for you, and it’s working as it should.

Best regards,
Rikard

June 16, 2022 at 11:25 am #1355471

Guenni007

As Rikard mentioned allready – the margin-top had to be zero.

if you like to have the header sticky on mobile too – there are a few more things to set.
See a testpage of mine: https://webers-testseite.de/

If you are also interested to have the sticky header on mobile – i will post the whole css code here:
for testing:

@media only screen and (max-width: 989px) {
  #top  #header_main,
  #top #main  {
    margin: 0 !important;
    padding: 0 !important
  }

  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }

  /*** 110px if there is a topmenu - else 80px ***/
  #top #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }

  /*** wenn anfangs transparenz gewünscht - dann auch header_meta ***/
  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #top #header_main {
    border-bottom: none;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg{
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  #top .header_bg {
    background-color: transparent !important;
  }

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

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

  /*** if there is a header_meta  ***/
  #top #header.av_header_transparency #header_meta .phone-info * {
    color: #FFF !important;
  }

  .html_mobile_menu_tablet #top #header.header_color div .av-hamburger-inner, 
  .html_mobile_menu_tablet #top #header.header_color div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet #top #header.header_color div .av-hamburger-inner::after {
    background-color: #922090 !important;
  }
  
  .html_mobile_menu_tablet #top #header.header_color.av_header_transparency .menu-item-search a:before {
    color: #922090;
  }
  
  .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
    padding-top: 0 !important;
  }
  
  .responsive.html_mobile_menu_tablet.html_header_top:not(.html_header_transparency) #top #main {
    padding-top: 80px !important;
  }
}

June 16, 2022 at 2:24 pm #1355497

Hi,

Thanks for sharing @guenni007 :-)

Best regards,
Rikard

June 17, 2022 at 6:26 pm #1355633