Mobile Hamburger Menu in Default PlayTube Theme

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.