Transparent Navigation Menu Problems

Hi,

I’m having problems with my transparent menu. I can see it on my desktop, but not on mobile devices. I’m not sure how to fix this. Any help would be appreciated.

Also, I would prefer to have the sticky menu deactivated. However, when I do this the menu just disappears off all devices. I have enclosed all the code I have inserted into the custom CSS. I also have one or two child themes activated. If it would be more helpful, I can provide a temporary login for the back end of the site.

Thanks,
Jeff

/* Remove Logo in Menu img constraint */
header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}
/* Move logo in menu */
body.responsive header#masthead.masthead-logo-in-menu .logo {
margin-left: 5px !important;
}
header#masthead.masthead-logo-in-menu .logo {
padding: 5px 5px !important;
}
/* Logo in Menu Transparent Menu BG */
nav:first-of-type { display: none; }
.main-navigation.sticky[style] { width: 100% !important;
	background: rgba(0, 0, 0, 0.4);
	box-shadow: none !important;
}
/* Menu hover transparency */
.main-navigation ul li:hover > a, #search-icon #search-icon-icon:hover {
background: rgba(0, 0, 0, 0.0) !important;
}
/* Menu vertical spacing and text spacing */
.main-navigation ul li a {
  padding: 55px 15px;
}
/* Right align the main menu */
.main-navigation ul {
text-align: right;
}
.main-navigation ul li {
display: inline-block;
float: none;
}
/* Set menu font family and size */
.main-navigation a {
font-size: 16px !important;
}

URL: http://www.singletrackacademy.com