Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 15, 2019 at 11:13 am #1148028
    richardbeatty

    Hi

    OBJECTIVE:
    Transparent Header to behave the same on mobile as desktop.
    – different transparent header appears when page/post header set as transparent
    – the transparent header is NOT sticky (sticky header under enfold settings is un-ticked)

    I added quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0 !important;
    }
    .responsive #top .av_header_transparency .logo img.alternate {
    display: block !important;
    }

    The above doesn’t seem to work.
    …. oddly, I did get this work yesterday but the logo was sticky.

    Thanks

    Richard

    October 17, 2019 at 9:25 am #1148835
    Vinay

    Hey richardbeatty,

    Thank you for sharing the details.

    Please remove your code and try the below CSS

    
/* Transparent header on mobile */
 @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;
}}


/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important;
  }
}

    Please bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

    October 17, 2019 at 1:03 pm #1148905
    richardbeatty

    Code is added as quick css, flushed cache,
    Not working yet.
    Example page attached.
    I viewed on both iPhone and iPad.
    Kind regards
    Richard

    October 18, 2019 at 1:57 pm #1149260
    Victoria

    Hi Richard,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    The code Vinnay gave you works, but also makes the header transparent.

    Best regards,
    Victoria

    October 19, 2019 at 12:50 am #1149439
    richardbeatty

    pls see credentials
    I appreciate you looking into this.

    The code currently inserted in quick CSS:

    /* Transparent header on mobile FROM ENFOLD SUPPORT TICKET */
    @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;
    }}
    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
    position: fixed !important;
    }
    }

    Regards

    Richard

    October 21, 2019 at 12:25 pm #1149837
    Victoria

    Hi Richard,

    https://cl.ly/59c96addf500 IS this what you intended?

    Best regards,
    Victoria

    October 21, 2019 at 1:12 pm #1149851
    richardbeatty

    Hi

    Yes BUT the transparent logo image previously uploaded into enfold / header / transparency is different from the desktop logo shown in the screenshot.

    Your further help is appreciated.

    Kind regards

    Richard

    October 22, 2019 at 5:53 pm #1150237
    Victoria

    Hi Richard,

    The logo does not change if the header transparency is not enabled in the Theme options. It has to be changed in by JavaScript then or css.

    Best regards,
    Victoria

    October 22, 2019 at 6:02 pm #1150243
    richardbeatty

    Hi Victoria

    The header transparency is set in theme options.

    The thread has stalled a little here. To recap, transparent header works great on desktop but does not work on mobile.

    Please advise.

    Thank you

    Richard

    October 25, 2019 at 8:43 am #1151117
    richardbeatty

    Sorry I changed accidentally the login credentials please see.

    October 27, 2019 at 10:21 am #1151482
    Victoria

    Hi richardbeatty,

    I am confused now, header transparency does not really work as it should on the desktop right now either.

    Please deactivate all caching plugins one by one to check which one is causing this issue and let us know if this solves the problem.

    Best regards,
    Victoria

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