Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 10, 2024 at 4:03 am #1429676
    solinpaul2

    Hello,
    I have set my header on each page to be transparent in the Default Editor. When viewing the webpages in full screen browser window the header is transparent however if you change the size of the browser window the header loses transparency and gets a white background with a different color logo. The header on mobile is not transparent either.

    Is there some settings I need to change somewhere. It seems like I have checked all the settings and couldn’t find where to edit mobile version of the webpage settings.

    I am using the the Enfold Health Demo theme currently.

    Thank you!

    January 10, 2024 at 9:30 am #1429690
    Ismael

    Hey solinpaul2,

    Thank you for the inquiry.

    The transparent and fixed header options are disabled on mobile devices by default. The header will remain static on smaller screens without transparency. We could add a few css modification to re-enable these options, but we don’t recommend it.

    @media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  #top #wrap_all .av_header_transparency {
    background-color: transparent;
    color: #333333;
    border-color: #e1e1e1;
  }
}

    Best regards,
    Ismael

    January 15, 2024 at 5:44 am #1430108
    solinpaul2

    Hello,
    Why is it not recommended to have transparent header/logo on mobile?

    I would like to make it transparent just like it is on our desktop website. Where would I enter the css code you have sent?

    January 15, 2024 at 5:49 am #1430109
    Ismael

    Hi,

    Why is it not recommended to have transparent header/logo on mobile?

    Transparent or fixed headers on desktop are used to enhance site navigation by keeping the main menu accessible while scrolling. However, on mobile devices, users can easily return to the top of a page or site with double taps and other mobile phone gestures, making fixed headers unnecessary. Also, fixed headers consume space that is better allocated for actual site content, and they can also be distracting.

    If you want to continue, you can add the code in the Enfold > General Styling > Quick CSS field or in the child theme’s style.css file.

    Best regards,
    Ismael

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