Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 19, 2025 at 4:40 am #1479688
    THP Studio

    Hey Mike,

    you helped me the other day with some CSS for a transparent header on mobile:

    Transparent Mobile Header & Logo

    I’m still working on it, but I discovered that the code I had found elsewhere on the forum isn’t playing nicely with pages that don’t have a transparent header – it makes the header cover parts of the page, in this case the breadcrumbs.

    This is the code that is the problem, but without it the transparent header doesn’t seem to work:

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { 
        position: absolute;
}}

    So the code I use currently is:

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { 
        position: absolute;
}}

@media only screen and (max-width: 768px) {
#top #wrap_all .av_header_transparency {
	background: transparent;
}}

@media only screen and (max-width: 768px) { 
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
    opacity: 0;
}

.responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block;
}
}

    But it needs a tweak to not wreck pages without a transparent header. See private for an example – homepage transparent, other pages not but hiding the breadcrumb bar due to this issue.

    Can you supply some updated CSS please? (even better would be to have proper transparent header on mobile support in the theme options…)

    Thanks

    Tim

    March 22, 2025 at 8:21 pm #1479930
    Mike

    Hey Tim,
    I’m not seeing your issue when I check your page, perhaps a screenshot would help.

    Best regards,
    Mike

    March 24, 2025 at 2:08 am #1480008
    THP Studio

    Hi Mike,

    Sorry, hopefully the screenshots clear this up, links in private.

    As you can see the code I flagged above hides the breadcrumbs from showing on pages that don’t have a transparent header on mobile. But without it the pages that do have a transparent header don’t have a working transparent header on mobile.

    Thanks

    Tim

    • This reply was modified 3 weeks, 1 day ago by THP Studio.
    March 27, 2025 at 10:08 pm #1480294
    Mike

    Hi,
    Thank you for your patience, when I check your page /customer-car-builds/ “Vehicle Gallery” the breadcrumbs show, I assumed that you removed the css, so I tested with the css but the breadcrumbs still showed, perhaps you have already sorted it out?

    Best regards,
    Mike

    • This reply was modified 2 weeks, 5 days ago by Mike. Reason: remove screenshot
    March 27, 2025 at 10:14 pm #1480295
    THP Studio

    Hey Mike,

    Would you mind moving your screenshot into private field please?

    I’ve just checked and the CSS is still in there, and in two browsers (both logged in and logged out) I have this same issue.

    Could you try again or try on a local test site perhaps?

    Thanks

    Tim

    March 28, 2025 at 8:08 am #1480323
    Ismael

    Hi,

    Thank you for the info.

    The breadcrumb container is present but is being covered by the header. Try to add this css code to adjust the top padding of the main container.

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

  /* Add your Mobile Styles here */
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 65px !important;
  }
}

    (removed screenshot)

    Best regards,
    Ismael

    March 31, 2025 at 5:41 am #1480496
    THP Studio

    Hi Ismael,

    Thanks a lot for helping out. Would you mind moving that Imgur link to private field please?

    I added your code and while it shows the breadcrumbs nicely on pages with a standard header, it doesn’t play well on pages with a transparent header on mobile (currently only the homepage on this dev site). This is the issue I have been trying to work out – some code that allows for a transparent header on mobile but that also doesn’t negatively affect pages that don’t have a transparent header.

    If you look at the staging site below, I have added your CSS in and as you’ll see on the homepage the transparent header is now no longer functioning correctly and has a black background (instead of sitting over the image if your CSS is removed).

    Could you please provide some further help?

    March 31, 2025 at 7:10 am #1480503
    Ismael

    Hi,

    Thank you for the update.

    We removed the screenshot. Try to include thi css code to remove the top padding on pages with transparent headers:

    .html_header_top.html_header_sticky.html_header_transparency #top #wrap_all #main {
    padding-top: 0 !important;
}

    Make sure to place this below the first css rule suggested above, inside the css media query.

    Best regards,
    Ismael

    March 31, 2025 at 7:24 am #1480505
    THP Studio

    Hi Ismael,

    Thanks for the fast response and the helpful reply.

    I think we finally have it working! My initial testing looks good, I’ll let you know if I hit any more issues with it once I shift it to the live site. Perhaps keep this open for another week or two, I’ll let you know when it can be closed.

    Thanks, really appreciate the help.

    Tim.

    PS – Could I suggest that having a transparent header for mobile be considered for inclusion in the theme options (rather than custom CSS)? It seems like something that would be good to have as a feature, since a transparent header is already included for desktop.

    April 2, 2025 at 6:09 am #1480614
    Ismael

    Hi,

    Glad to know that this has been resolved! We’ll forward the thread to our channel for further considerations. If you have more questions, please feel free to open another thread. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Transparent header on mobile’ is closed to new replies.