Transparent menu on mobile device

Hi,

I have a problem with the background color on mobile devices. it is unfortunately transparent (safari iOS 12, screenshot) and so you are not able to read it while the below content has a white background.

Is it possible to make the submenus transparent on the desktop web page as well?

this is how my current custom css looks like:

.site-logo {
    max-height: 150px;
}

nav.posts-navigation {
    display: none;
}
.post-navigation {
    display: none;
}
nav {
	background: rgba(0,0,0,0.5);
	height: 40px;
	text-align: center;
	padding-top: 0px;
	border-radius:10px;
	width: auto;
}
.slide-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
}
#mainnav ul li a, #mainnav ul {
	font-size: 14px;
	font-weight: bold;
	padding-top: 4px;
}
#mainnav .sub-menu li a {
		background: rgba(0,0,0,0.65);
		border-radius:0px;
	border-top: red;
}
#mainnav-mobi {
background-color: #000;
}
nav-mobi {
	background-color: #000
}
.current-menu-item a, .current-menu-ancestor a {
    color: #efefef !important;
}

thanks and many greetings,
Markus!
IMG_0041|281x500

Hello Markus,

Can you please provide a link to your website and some more details about what exactly you want to achieve? And please try to upload the screenshot once again, the screenshot link above is invalid.

Kind Regards, Roman.

Hi,
thank you for your reply!
I thought I had given the link, sorry: https://worship4.live

in the meantime, I somehow managed it. my custom css currently looks like this:

.site-logo {
    max-height: 150px;
}

nav.posts-navigation {
    display: none;
}
.post-navigation {
    display: none;
}
nav {
	background: rgba(0,0,0,0.5);
	height: 40px;
	text-align: center;
	padding-top: 0px;
	border-radius:10px;
	width: auto;
}
.slide-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
}
#mainnav ul li a, #mainnav ul {
	font-size: 14px;
	font-weight: bold;
	padding-top: 4px;
}
#mainnav .sub-menu li a {
		background: rgba(0,0,0,0.65);
		border-radius:0px;
	border-top: red;
}
#mainnav-mobi ul li a, #mainnav-mobi ul {
background-color: #000;
}
.current-menu-item a, .current-menu-ancestor a {
    color: #FFF !important;
}
.site-info.container {
    display: none;
}

Do you have any suggestions for optimizations?
Best regards,
Markus

Hello Markus,

in the meantime, I somehow managed it

Great, thanks for letting me know :slight_smile:

Do you have any suggestions for optimizations?

Well, I checked your mobile menu. It looks okay and works well, so I don’t have suggestions :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.