Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 8, 2020 at 8:17 pm #1220619
    mandahays

    Hi there! I’m trying to get the sticky header to work for mobile on my site. I tried adding the CSS listed in the documentation, but that makes the padding on the sides of the page’s content very large. Is there a way to fix this issue? Below is a screenshot of how the page looks before and after adding the CSS. Thank you!

    Before adding the CSS.

    After adding the CSS. The main header text is now much smaller, as is the content on the rest of the page.

    • This topic was modified 4 years, 5 months ago by mandahays.
    June 10, 2020 at 5:03 am #1221035
    Rikard

    Hey mandahays,

    Thanks for the screenshots, I’m not sure exactly what it is that you want to alter though. There doesn’t seem to be much difference between the two? I checked your site on mobile as well, and it looks good on my end. Could you try to explain a bit further what it is that you want to change on your site please?

    Best regards,
    Rikard

    June 10, 2020 at 11:04 am #1221131
    Guenni007

    you had to see it on mobile advices.

    you break your menu at 990 so try please first remove the other code and try this in quick css:
    if it is done we will see if there will be more css to add – but i guess not.

    /****** responsive case when burger is visible *************/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  }
  
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}
    June 10, 2020 at 11:15 am #1221135
    Guenni007

    If you like to preserve that transparency header on start replace with:

    
/****** responsive case when burger is visible *************/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
    color: #000000;
    border-color: #f2f2f2;
  }
   
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}
    June 11, 2020 at 6:56 am #1221540
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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