Topic: Transparent background menu only in mobile

pol
March 28, 2024 at 11:46 am

Hello,

I used a hook element to have a transparent menu, but I only want it in mobile version. How can I do it?

Here some screenshots: https://app.screencast.com/1Lilmb6FEQxed

In private information there is the website.

Thank you!
Ying
March 28, 2024 at 12:25 pm
Hi there,

Remove the header element, we can use CSS to change the background color of the mobile header.
```
nav#mobile-header {
    background: transparent;
}
```
pol
March 28, 2024 at 12:59 pm

Hi Ying,

Thank you for your reply. I tried you comment but it is not I need.

I need as it is now, but in the PC it should always be white background menu and fixed.
Ying
March 28, 2024 at 2:00 pm

Have you done this?

Remove the header element, we can use CSS to change the background color of the mobile header.
pol
March 31, 2024 at 10:09 am

Hi Ying,

Yes, I tried it, but the elements inside the menu are white too, so if I set a white background color in the menu, the elements are not visible.

When the bakground color is transparent I need white elements inside. When the background color is white I need black elements inside. Plus there should be a transition between transparent background and white transparent.

Thank you for your help,
Ying
March 31, 2024 at 11:17 am

Can you just disable the header element then we can see what CSS is needed?

If you keep on refusing my suggestions, I don’t know how to help you!

Let me know 🙂
pol
April 11, 2024 at 11:34 pm

Sorry for my delay response. The header element is now disabled. Waiting your feddback. Thank you!
David
April 12, 2024 at 3:36 am

Hi there,

can you re-add the site URL in the Private information, as out server auto removes that after a period of inactivity.
pol
April 19, 2024 at 9:34 am

Hi David,

Sure, here you have. Thanks

Ying

April 19, 2024 at 9:42 am

Try this CSS:

nav#mobile-header:not(.is_stuck) {
    background-color: transparent;
    position: absolute;
    top: 0;
}

pol
April 21, 2024 at 2:59 am

Thank you Ying! Only one thing is missing: When background is transparent, the logo and icons are black and it should be white. When background is white, logo and icons should be black (and it is now yet).

Thank you all again!

David

April 21, 2024 at 7:11 am

Hi there,

try this CSS:


#mobile-header:not(.is_stuck) {
    --contrast: #fff;
}
#mobile-header:not(.is_stuck) .site-logo.mobile-header-logo img {
    filter: invert(1); 
}

pol
April 25, 2024 at 6:58 am

Hi David! That’s it! I didn’t know this lines. Thank you all very much for your help! Hope you have a nice day!
David
April 26, 2024 at 2:15 am

Glad we could be of help

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Transparent background menu only in mobile