Transparent Header on mobile

[antoine_generau]

Hello,

I use a transparent header (with the first section going below it) for some pages of my website. The problem is on mobile, because you can’t see the menu after clicking on the burger icon. How can I fix this?

See here : https://prnt.sc/lmund1

1. You can’t see the menu which is white, on white background
2. I used negativ margin in order to have the first section going below the transparent header. It doesn’t work well with the menu on mobile

URL: https://solar-learning.org/projects-solar-energy/ (pwd: solar)

Thanks,
Antoine

[nabeel]

Hi Antoine,

Thank you for reaching out to us. You can give your mobile menu a background color using custom CSS so the menu is visible when someone opens the mobile menu and for the negative margin issue you can set it to 0 for mobile screens. To do both, please add the following code in the Theme Options > CSS:

@media (max-width: 979px) {
    .x-nav-wrap.mobile {
        padding: 0 20px;
        background: rgba(0,0,0,0.6) !important;
    }
    .cs-content > .x-section:first-child {
        margin-top: 0 !important;
    }
}

Hope this helps!

[antoine_generau]

Thank you.

Is it possible to apply this setting only when the menu is expended? I’d like to keep the transparent header (the logo and the burger icon) when the menu is collapsed.

Thanks,
Antoine

[ruenel]

Hello Antoine,

You may update the code and use this instead:

@media (max-width: 979px) {
    .x-nav-wrap.mobile:not(.x-collapsed) {
        padding: 0 20px;
        background: rgba(0,0,0,0.6) !important;
    }
    .cs-content > .x-section:first-child {
        margin-top: 0 !important;
    }
}

Please let us know if this works out for you.

[antoine_generau]

Hello,

Thank you for updating the code. It doesn’t work exactly as I’d like it to do though.

1. The second part of the code makes the background image of the first section of the page below the header, when I’d like it to go underneath (this is why I added negativ margin. Is it possible to get this setting apply only when the menu is collapsed as well? I tried several things but did not manage to get it work.

2. I’d like the entire header to be with a background, not only the menu part. I therefore tried with .x-navbar-inner instead of .x-nav-wrap.mobile but I did not manage to get it work only with the menu expended (not sure if this is possible?)

Thanks,
Antoine

[christian]

Hey Antoine,

It’s not possible to apply the style to the masthead (entire header) when the menu is collapsed because the class is only applied to the menu.

I’d recommend instead that you absolute position the masthead and not use the manual negative margin for the first section. You can see why in the screencast in the secure note. You will also see how you can get the selector you need.

Please just note that this is already beyond the scope of our support because X is not capable to achieve this type of setup without much custom coding.

I’d strongly recommend that you upgrade to Pro. If you wish to continue with custom development, you’ll need to consult with a third party developer to work closely with you.

Hope that helps and thank you for understanding.

[antoine_generau]

Thank you, I understand. I can’t see “the screencast in the secure note” though, could you please send it again ? It would help me to change things as it should be.

[thai]

Hi @Lecoqdigital,

Here is the screencast: https://www.youtube.com/watch?v=3EJQiWBhH2k&feature=youtu.be

Regards!