https://idea-hack.com/en/blog/107229/

3 instant codes for using fullscreen menu with ‘jQuery fatNav’

We provide 3 instant code collection for fullscreen menu which is easily realized with 'jQuery fatNav'.

“jQuery fatNav” that makes it easy to use fullscreen menu for template developers.

fullscreen menu makes it easy to introduce drawers to your site.

However, if you do not know how to use it is surprisingly difficult to implement. So I created instant code collection that so that you can introduce it easily.

.wp-block-ug-button-block-3-127dfeac-f27b-4140-b5a6-941481a0cfdb a { margin-top: 0px !important; margin-bottom: 20px !important; color: #545454 !important; background-color: #ececec; font-size: 16px !important; border-radius: 0px !important; padding: 10px 20px !important; }.wp-block-ug-button-block-3-127dfeac-f27b-4140-b5a6-941481a0cfdb a:hover { background-color: #545454; color: #ffffff !important; } jQuery fatNav | Chubby fullscreen menu with nice hamburger toggle.

Introduction

These are assets in demos in this post.

CSS

.wp-block-ug-code-block-1-8cabe013-8a5d-4bb8-bcec-f0f4fe2d5b1f { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-8cabe013-8a5d-4bb8-bcec-f0f4fe2d5b1f pre code { font-size: 14px !important; }html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://wplabo.idea-hack.com/library/jquery-fatNav-master/jquery.fatNav.min.css">

Javascript

.wp-block-ug-code-block-1-eca053ea-1b9d-45f6-bfd8-af856ed39478 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-eca053ea-1b9d-45f6-bfd8-af856ed39478 pre code { font-size: 14px !important; }html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://wplabo.idea-hack.com/library/jquery-fatNav-master/jquery.fatNav.min.js"></script>

Code collection

1: Leave the default setting

.wp-block-ug-code-block-1-04df923a-4d24-4686-8850-fca8a75b77e0 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-04df923a-4d24-4686-8850-fca8a75b77e0 pre code { font-size: 14px !important; }css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
header {
	width: 100%;
	position: fixed;
	z-index: 99;
	margin: 60px auto;
}
.wp-block-ug-code-block-1-fec68e47-18d2-426c-9998-5f3e5a54b71c { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-fec68e47-18d2-426c-9998-5f3e5a54b71c pre code { font-size: 14px !important; }JQuery
jQuery(function($){
	$.fatNav();
});

Fullscreen Nav Menu Ex:2 Customizing hamburger color

.wp-block-ug-code-block-1-f90410b7-4f97-47fc-b67d-c188744b0945 { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-f90410b7-4f97-47fc-b67d-c188744b0945 pre code { font-size: 14px !important; }html
<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">Fullscreen Nav Menu</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
.wp-block-ug-code-block-1-f5d002b0-6c07-4f02-9c7b-6ff111804e23 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-f5d002b0-6c07-4f02-9c7b-6ff111804e23 pre code { font-size: 14px !important; }css
body {
  color: #484848;
  font-family: 'Quicksand', sans-serif;
}

header {
  width: 100%;
  position: fixed;
  z-index: 99;
  margin: 60px auto;
}

.hamburger .hamburger__icon,
.hamburger .hamburger__icon:before,
.hamburger .hamburger__icon:after {
  background-color: red;
}
.wp-block-ug-code-block-1-458eff2d-1baa-4e04-b71b-075179fcc17a { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-458eff2d-1baa-4e04-b71b-075179fcc17a pre code { font-size: 14px !important; }JQuery
jQuery(function($){
	$.fatNav();
});

Fullscreen Nav Menu Ex:3 Close button state:

.wp-block-ug-code-block-1-4807480a-b4eb-4b16-a8d0-49e0ecba1339 { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-4807480a-b4eb-4b16-a8d0-49e0ecba1339 pre code { font-size: 14px !important; }html
<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">Fullscreen Nav Menu</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
.wp-block-ug-code-block-1-195473c1-24b9-4b4a-9327-26bf99adbe80 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-195473c1-24b9-4b4a-9327-26bf99adbe80 pre code { font-size: 14px !important; }css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
header {
	width: 100%;
	position: fixed;
	z-index: 99;
	margin: 60px auto;
}
.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {
    background-color: red;
}
.hamburger.active .hamburger__icon:before, 
.hamburger.active .hamburger__icon:after {
    background-color: green;
}
.wp-block-ug-code-block-1-50034028-ae31-4dec-b076-3e5c17e5ac09 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-50034028-ae31-4dec-b076-3e5c17e5ac09 pre code { font-size: 14px !important; }JQuery
jQuery(function($){
	$.fatNav();
});