Mobile Menu: Turns White When Clicked Due to Transparency on Desktop Menu

[bringsjo]

Hello,

My website jensbringsjord.com has a mobile menu which has overlapping issues as it is made to be transparent and then turn to color on scroll. However, this is happening for mobile screens as well, and my intent was only for it to be visible for desktop like this. Can this be disabled for mobile screens? How do I achieve this? I have added two screens for reference of the issue:

Thank you in advice for your help!
Cheers,
Jens

[Prasant]

Hello Jens,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-navbar.x-navbar-fixed-top {
    background-color: #5233ab !important;
}
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.