I am trying to make a transparent menu in Bulma. This is my desktop viewport:
As you can see I have got the desktop viewport to work fine, but when I try to make this work on mobile, my menu looks like this:
It appears to use the same menu properties as on the desktop version, but it gives it a white background so the text is invisible.
How would you customise this mobile menu? I would like to give it a transparent background so it just appears like text floating on 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/
This is because Bulma shows your menu in a collapsed for on mobile. That said collapsable background is set to white by Bulma. A quick look into the CSS lights up the darkness.
@media screen and (max-width: 1087px) {
.navbar-menu {
background-color: #212121;
}
}
Just overwrite that rule with a custom one to transparent and it should work. Else, and if Bulma provides that ability, use a helper class to set transparent background on your nav. Also keep in mind to adjust your currently active elements background.
See here for a live example. Just don't copy the styling, since it's using !important. Try to avoid using !important keyword.