SlickNav menu doesn't move, prependTo doesn't work - wordpress

Question

I have slicknav on my Wordpress theme but it stays on top of the page. I tried editing the prependto, but still it doesnt move. Here's the HTML:
<div class="logo-wrap">logo html</div>
<nav class="main-nav"></nav>
<div class="mobile-nav"></div>
<div id="hello">this is where I want the slick nav to appear</div>`
Here's the JS:
;(function ($, document, window) {
var
// default settings object.
defaults = {
label: 'MENU',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
//prependTo: 'body',
prependTo: '#hello',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
brand: '',
init: function () {},
open: function () {},
close: function () {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav';
Here's the CSS:
.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438rem 0.625rem; line-height: 1.125rem; cursor: pointer; }
.slicknav_menu .slicknav_menutxt { display: block; line-height: 1.125rem; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188rem 0 0 0.438rem; }
.slicknav_menu .slicknav_no-text { margin: 0; }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125rem; height: 0.125rem; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188rem }
.slicknav_nav { clear: both; }
.slicknav_nav ul, .slicknav_nav li { display: block; }
.slicknav_nav .slicknav_arrow { font-size: 0.8rem; margin: 0 0 0 0.4rem; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block; }
.slicknav_nav .slicknav_item a { display: inline; }
.slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both; }
.slicknav_menu { *zoom: 1; }
.slicknav_menu { font-size: 13px; font-size: 0.8125rem; }
.slicknav_btn { margin: 0 5px; text-decoration: none; background: #9EB058; }
.slicknav_menu .slicknav_menutxt { color: #fff; font-weight: bold; }
.slicknav_menu .slicknav_icon-bar { background: #f5f5f5; }
.slicknav_menu { border-top:1px solid #DCDCCD; border-bottom: 2px solid #9EB058; }
.slicknav_nav { font-size: 16px; font-size: 1rem; font-weight: 600; color: #fff; margin: 0; padding: 0; margin-bottom: 20px; }
.slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; }
.slicknav_nav ul { padding: 20px 0 0 15px; border-top: 2px solid #DCDCCD; }
.slicknav_nav ul ul { border: 0; padding: 0 0 0 15px; }
.slicknav_nav .slicknav_item { padding: 5px 10px; margin: 2px 5px; }
.slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #4F4322; }
.slicknav_nav .slicknav_item a { padding: 0; margin: 0; }
.slicknav_nav .slicknav_item:hover { background: #9EB058; color: #fff; }
.slicknav_nav a:hover { background: #9EB058; color: #fff; }
.slicknav_nav .slicknav_txtnode { margin-left: 15px; }
How do I move the slicknav menu?