Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 28, 2023 at 9:08 am #1399488
    Monika

    hey there,

    is there a possibility to get always a sticky transparent header in all devices?
    I tried all the css codes from your documentation but as soon as I used all, then the first stopped working …

    Is it also possible to set this in PHP function?
    Because.. for all of my clients I need this function. It would be easier in future.

    This is my Css so far, but it’s not working in every case and sometimes it shows the white Header bar in tablet and mobile.

    /* Transparent Sticky Header */ 
#header.header_color .header_bg {
    background: transparent!important;
}

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 180px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;

  }
}

    Thank you!
    Monika

    March 1, 2023 at 9:42 am #1399637
    Nikko

    Hi Monika,

    Can you try using this CSS code instead and see if it helps?

    /* Transparent Sticky Header */ 
#top #wrap_all #header,
#header.header_color .header_bg {
    background: transparent!important;
}

/* Sticky header on mobile */
@media only screen and (max-width: 1024px) {
  .responsive #top #main {
    margin-top: 0;
  }

  .responsive #top #wrap_all #header {
    position: fixed !important;

  }
}

    Best regards,
    Nikko

    • This reply was modified 1 year, 8 months ago by Nikko.
    March 1, 2023 at 10:58 am #1399653
    Monika

    YEAH! That worked.
    Awesome. Thanks

    March 1, 2023 at 6:58 pm #1399711
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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