Transparent header / mobile bar issue on Brine (7.0)

Site URL: https://www.dissolveaudio.com

Hello,

I'm trying to make the header transparent on the mobile view, but it's not having the effect I hoped for.

I've already set the mobile bar background to be transparent in Site Styles. This has the effect shown in the first screenshot, the background image is not visible underneath.

I then add the following code, courtesy of @tuanphan on another thread (thank you for all your contributions):

.Mobile-bar.Mobile-bar--top { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; }

We can now see the background image but the content has moved up and the main body is now overlapping with the header (see second screenshot).

If possible, I would like the same layout and positioning as the first screenshot but with the transparent bar and background image visible like the second screenshot.

Hope this makes sense and would really appreciate any help!

Thanks

B

Hi,

Add to Design > Custom CSS

/* mobile home transparent header */
@media screen and (max-width:767px) {
body.homepage .Mobile.loaded {
    background: transparent !important;
    position: absolute !important;
}
body.homepage .Mobile-bar.Mobile-bar--top {
    background-color: transparent;
}
div#block-yui_3_17_2_1_1665597069172_33973 {
    margin-top: 50px;
}
}

This worked - thank you so much!

Just checked again and while the code worked to make the header transparent, the burger menu has now stopped working on mobile.

It also seems to have overridden my code to prevent side scrolling on mobile view - any ideas why?

Thanks

B

On 10/25/2022 at 1:30 AM, blane said:

Just checked again and while the code worked to make the header transparent, the burger menu has now stopped working on mobile.

It also seems to have overridden my code to prevent side scrolling on mobile view - any ideas why?

Thanks

B

Try this new code

/* mobile home transparent header */
@media screen and (max-width:767px) {
body.homepage .Mobile.loaded {
    background: transparent !important;
    position: absolute !important;
}
body.homepage .Mobile-bar.Mobile-bar--top {
    background-color: transparent;
    z-index: 99999999;
    position: relative !important;
}
div#block-yui_3_17_2_1_1665597069172_33973 {
    margin-top: 50px;
}
}