В следующем фрагменте исполняемого кода я настроил базовый макет Bulma с панелью навигации. Навигационная панель очень рано превращается в гамбургер из-за количества/размера ссылок, которые у меня есть.
Как я могу сделать этот перерыв только на небольших экранах? например Гамбургер только на телефонах.
(function() {
let burger = document.querySelector('.burger');
let nav = document.querySelector('#' + burger.dataset.target);
burger.addEventListener('click', function() {
burger.classList.toggle('is-active');
nav.classList.toggle('is-active');
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<nav class="navbar is-black is-desktop">
<div class="container">
<div class="navbar-brand">
<a href="#" class="navbar-item">
title
</a>
<span class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-end">
<a href="#" class="navbar-item is-active">Home</a>
<a href="#" class="navbar-item">Two</a>
<a href="#" class="navbar-item">Three</a>
<a href="#" class="navbar-item">Four</a>
<a href="#" class="navbar-item">Five</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<h1 class="title">
Hamburger Help!
</h1>
<p class="subtitle">
How do i get the nav links to show on tablet instead of the hamburger?
</p>
</div>
</section>
</body>
</html>