Issue
I'm new on bulma css http://bulma.io/
I'm trying to use hamburger menu for mobile user. I just followed instruction on this page: http://bulma.io/documentation/components/nav/
But it doesn't work. What should I add ?
Actually, I can see hamburger menu, but it doesn't work when I am click it.
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item" href="/">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="/about">
About
</a>
<a class="nav-item" href="/path">
Path
</a>
<a class="nav-item" href="/blog">
Blog
</a>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
</div>
</div>
</section>
</body>
</html>
Solution
This may be an issue with the example given in the docs, I was able to get it working by adding ids to the .nav-toggle and .nav-menu.
<span id="nav-toggle" class="nav-toggle"> and <div id='nav-menu' class="nav-right nav-menu">
jsfiddle here.
So to get the example working, you'd have to add 'id's to the respective elements. I'd recommend deep diving into the docs though
Answered By - semuzaboi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.