Creating a transparent menu in Bulma has been successful for the desktop viewport:
However, when attempting to implement the same design on mobile, the menu ends up like this:
The mobile version seems to inherit the properties of the desktop menu but with a white background, making the text unreadable.
How can I customize the mobile menu to have a transparent background, creating a floating text effect against the background image?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>examp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/bulma.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="js/validate-form.js"></script>
<script src="js/google-validate.js"></script>
<script src="js/scroll.js"></script>
<script src="js/burger.js"></script>
<script>
</script>
</head>
<body>
<section class="hero is-fullheight is-gradient">
<nav class="navbar is-transparent">
<div class="container">
<div class="navbar-brand">
<a href="index.html" class="navbar-item">
<h1 class="title is-3 has-text-white">Example</h1>
</a>
<span id="nav-toggle" class="navbar-burger burger has-text-white" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbar-menu" class="navbar-menu">
<div class="navbar-end">
<a href="index.html" class="navbar-item is-active has-text-white">
<i class="fas fa-home"></i>
</a>
<a id="aboutbtn" href="#about" class="navbar-item has-text-white">
About
</a>
<a href="portfolio.html" class="navbar-item has-text-white">
Portfolio
</a>
<a href="#contact" class="navbar-item has-text-white">
Contact
</a>
</div>
</div>
</div>
</nav>
<!-- Hero head: will stick at the top -->
<div class="hero-head">
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title has-text-white">
Issue with mobile menu!
</h1>
<h2 class="subtitle has-text-white">
As you can see, the mobile-menu appears to be on a white background and is hard to see.
</h2>
</div>
</div>
Jsfiddle: https://jsfiddle.net/xpvt214o/972239/