I've had a couple ask for the hamburger menu I use on vigeos.net. It's not the best looking, but it gets the job done for me. Also this is probably one of the larger code modifications, just to give a heads up. This will also take some customization on your behalf as well, as I manually added each link. I figured I'd only be doing it once as I originally built this for my use, not thinking anyone else would be using it, so I never automated it to pull in current categories. Sorry, maybe in the future I will automate this a bit more. Anyway, on with the modifications.
Note: Always backup your db and any files to be modified just to be safe. These types of modifications are not a simple plug and play kind of install. I am not responsible for any loss of data nor does this script come with any guarantee. This script is provided as is.
\themes\default\layout\content.html around line #18 find
<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<?php if ($pt->config->night_mode == 'both' || $pt->config->night_mode == 'night_default'): ?>
<li class="toggle-mode hidden-xs pull-left top-header">
<label class="switch" data-toggle="tooltip" data-placement="bottom" title="{{LANG mode}}">
<input type="checkbox" {{MODE}} id="toggle-mode">
<span class="slider round">
<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-bulb"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>
</span>
</label>
</li>
<?php endif; ?>
<li class="show-in-mobile pull-left top-header">
<a href="#" class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </a>
</li>
Below add
<li class="show-in-mobile pull-left top-header menu-btn"><a class="btn-open" href="javascript:void(0)"><i class="fa fa-bars" aria-hidden="true"></i></a></li>
Find in same file
<?php } ?>
<?php if (IS_LOGGED): ?>
<script>
Above add this code, you will need to add the links you want to show.
<div class="overlay">
<div class="menu">
<ul>
<ul>
<li style="padding-bottom: 0;"><font color="white"><h2>Menu</h2></font></li>
<hr style="margin-top: 0;">
<li><a href="https://www.vigeos.net/videos/latest">Latest</a> | <a href="https://www.vigeos.net/videos/trending">Trending</a> | <a href="https://www.vigeos.net/videos/top">Top</a> | <a href="https://www.vigeos.net/submissions">Submissions</a></li>
<br>
<li style="padding-bottom: 0;"><font color="white"><h2>Categories</h2></font></li>
<hr style="margin-top: 0;">
</ul>
<ul class="cat-full-menu">
<li><a href="https://www.vigeos.net/videos/category/1">Adventure</a></li>
<li><a href="https://www.vigeos.net/videos/category/30">Auto</a></li>
<li><a href="https://www.vigeos.net/videos/category/40">Comedy</a></li>
<li><a href="https://www.vigeos.net/videos/category/45">Cool</a></li>
<li><a href="https://www.vigeos.net/videos/category/46">Not Cool</a></li>
<li><a href="https://www.vigeos.net/videos/category/50">Cringe</a></li>
<li><a href="https://www.vigeos.net/videos/category/60">Cute</a></li>
<li><a href="https://www.vigeos.net/videos/category/70">Entertainment</a></li>
<li><a href="https://www.vigeos.net/videos/category/80">Food</a></li>
<li><a href="https://www.vigeos.net/videos/category/90">Gadgets</a></li>
<li><a href="https://www.vigeos.net/videos/category/100">Gaming</a></li>
<li><a href="https://www.vigeos.net/videos/category/110">Health</a></li>
<li><a href="https://www.vigeos.net/videos/category/120">How To</a></li>
<li><a href="https://www.vigeos.net/videos/category/130">Interesting</a></li>
<li><a href="https://www.vigeos.net/videos/category/140">Love</a></li>
<li><a href="https://www.vigeos.net/videos/category/145">Music</a></li>
<li><a href="https://www.vigeos.net/videos/category/150">News</a></li>
<li><a href="https://www.vigeos.net/videos/category/155">Pets & Animals</a></li>
<li><a href="https://www.vigeos.net/videos/category/160">Sad</a></li>
<li><a href="https://www.vigeos.net/videos/category/170">Science</a></li>
<li><a href="https://www.vigeos.net/videos/category/180">Sports</a></li>
<li><a href="https://www.vigeos.net/videos/category/190">Technology</a></li>
<li><a href="https://www.vigeos.net/videos/category/195">Weird</a></li>
<li><a href="https://www.vigeos.net/videos/category/200">Wow</a></li>
</ul>
</ul>
</div>
</div>
Now at the bottom of this file add this
<script type="text/javascript">
$(document).ready(function () {
$(".menu-btn a").click(function () {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
</script>
Save that file and navigate to \themes\default\css\style.css and add this to the bottom
/* Mobile Hamburger Menu */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #212121;
}
.overlay .menu {
margin: 10% auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 20px 0;
width: 25%;
list-style: none;
text-align: center;
text-transform: uppercase;
}
.overlay .menu ul li a {
color: #34B484;
font-weight: bold;
font-size: 20px;
}
.overlay .menu ul ul {
margin-top: 50px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff !important;
text-transform: capitalize;
font-weight: bold;
font-size: 14px;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* Mobile Hamburger Menu Responsive */
@media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 50px;
width: 100%;
border-bottom: 1px solid #575757;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
}
Now you are done! 🙂
Ctrl + Click the refresh button on your website to clear the site cache, and you should see the menu on mobile.
Hello
There is that line where you say
Above add this code, you will need to add the links you want to show.
I did not understand exactly where above did you mean. Do you mean to add the code at the beginning or at the end or inside if this code;
<?php } ?>
<?php if (IS_LOGGED): ?>
<script>
Above
<?php } ?>
