themehunt.com/item/1527567-dope-multipurpose-bootstrap4-template
我已经下载了此模板，当我通过演示查看它时，它可以在移动设备中完美运行，但是当我在域中使用相同的网站时，它在浏览器中可以正常运行，但移动视图不能正确显示菜单，一切是分开的，而且在移动设备上，预加载器仍保持加载
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>MavericksMedia | - Web Design & Developent Company Toronto, SEO Company Toronto </title>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- Preloader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Start header section -->
<header class="header-area" id="header-area">
<div class="dope-nav-container breakpoint-off">
<div class="container">
<div class="row">
<!-- dope Menu -->
<nav class="dope-navbar justify-content-between" id="dopeNav">
<!-- Logo -->
<a class="nav-brand" href="index.html">
<img src="img/logo.png" alt="">
</a>
<!-- Navbar Toggler -->
<div class="dope-navbar-toggler">
<span class="navbarToggler">
<span></span>
<span></span>
<span></span>
</span>
</div>
<!-- Menu -->
<div class="dope-menu">
<!-- close btn -->
<div class="dopecloseIcon">
<div class="cross-wrap">
<span class="top"></span>
<span class="bottom"></span>
</div>
</div>
<!-- Nav Start -->
<div class="dopenav">
<ul id="nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about-us1.html">About Us</a>
</li>
<li>
<a href="services1.html">SEO Services</a>
</li>
<li>
<li>
<a href="#">Web Design</a>
<ul class="dropdown">
<li><a href="single-portfolio.html">Custom Website</a></li>
<li><a href="single-portfolio.html"> E-Commerce Store</a></li>
</ul>
</li>
<li>
<a href="#">Mob App Development</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</div>
</header>
<!-- Start header section -->
<!-- Start banner section -->
<section class="banner-section relative section-gap-full" id="banner-section">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 banner-left">
<h1 class="text-uppercase">SEO, Web Design & Mobile App Development Company</h1>
<p>We are your Professional SEO, Digital Marketing, Web Design , Ecommerce & Mobile App Development Company based in Toronto, SEO Company Toronto. </p>
<a class="video-btn primary-btn" href="about-us.html"><b>Request a Quote</b></a>
</div>
<div class="col-md-6 banner-right text-center">
<img class="img-fluid" src="img/screen1.png" alt="">
</div>
</div>
</div>
<div class="wave">
<svg class="nectar-shape-divider" fill="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"
preserveAspectRatio="none">
<path d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
<path d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
<path d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
</svg>
</div>
</section>
<!-- End banner section -->
<!-- Start about section -->
<section class="about-section section-gap-full relative" id="about-section">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-md-12 about-left">
<img class="img-fluid" src="img/app-img.png" alt="">
</div>
<div class="col-lg-5 col-md-7 about-right">
<h3>Need a Website or Mobile App?</h3>
<h1>Let us Build Beautiful Websites or Apps for your Business!</h1>
<ul>
<li class="d-flex">
<div class="icon">
<span class="ti-layout-media-center-alt"></span>
</div>
<div class="details">
<h4>Retina Ready</h4>
<p>
A wonderful serenity has taken possession of my entire soul, like these sweet
mornings of spring which I enjoyed.
</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<span class="ti-crown"></span>
</div>
<div class="details">
<h4>Premium Quality</h4>
<p>
A wonderful serenity has taken possession of my entire soul, like these sweet
mornings of spring which I enjoyed.
</p>
</div>
</li>
<li class="d-flex">
<div class="icon">
<span class="ti-headphone-alt"></span>
</div>
<div class="details">
<h4>Excellent Support</h4>
<p>
A wonderful serenity has taken possession of my entire soul, like these sweet
mornings of spring which I enjoyed.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": 150, "y": -20, "rotateZ":500}'>
<img src="img/shape/fl-shape-1.png" alt="">
</span>
<span data-parallax='{"x": 250, "y": 150, "rotateZ":500}'>
<img src="img/shape/fl-shape-2.png" alt="">
</span>
<span data-parallax='{"x": -180, "y": 80, "rotateY":2000}'>
<img src="img/shape/fl-shape-3.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": 180}'>
<img src="img/shape/fl-shape-4.png" alt="">
</span>
<span data-parallax='{"x": 300, "y": 70}'>
<img src="img/shape/fl-shape-5.png" alt="">
</span>
<span data-parallax='{"x": 250, "y": 180, "rotateZ":1500}'>
<img src="img/shape/fl-shape-6.png" alt="">
</span>
<span data-parallax='{"x": 180, "y": 10, "rotateZ":2000}'>
<img src="img/shape/fl-shape-7.png" alt="">
</span>
<span data-parallax='{"x": 60, "y": -100}'>
<img src="img/shape/fl-shape-9.png" alt="">
</span>
<span data-parallax='{"x": -30, "y": 150, "rotateZ":1500}'>
<img src="img/shape/fl-shape-10.png" alt="">
</span>
</div>
</section>
<!-- End about section -->
<!-- Start feature section -->
<section class="feature-section section-gap-full" id="feature-section">
<div class="container">
<div class="row align-items-center feature-wrap">
<div class="col-lg-4 header-left">
<h1>
Call us Today 416-777-7777
</h1>
<a class="primary-btn" href="about-us.html">Request a Quote
<span class="ti-arrow-right"></span>
</a>
</div>
<div class="col-lg-8">
<div class="row features-wrap">
<div class="col-md-6">
<div class="single-feature relative">
<div class="overlay overlay-bg"></div>
<span class="ti-palette"></span>
<h3>Awesome Design</h3>
<p>
His many legs, pitifully thin compared with the size of the rest of him, waved
about helplessly as he looked.
</p>
</div>
</div>
<div class="col-md-6">
<div class="single-feature relative">
<div class="overlay overlay-bg"></div>
<span class="ti-heart"></span>
<h3>Made With Love</h3>
<p>
His many legs, pitifully thin compared with the size of the rest of him, waved
about helplessly as he looked.
</p>
</div>
</div>
<div class="col-md-6">
<div class="single-feature relative">
<div class="overlay overlay-bg"></div>
<span class="ti-loop"></span>
<h3>Constant Update</h3>
<p>
His many legs, pitifully thin compared with the size of the rest of him, waved
about helplessly as he looked.
</p>
</div>
</div>
<div class="col-md-6">
<div class="single-feature relative">
<div class="overlay overlay-bg"></div>
<span class="ti-headphone-alt"></span>
<h3>Full Free Chat</h3>
<p>
His many legs, pitifully thin compared with the size of the rest of him, waved
about helplessly as he looked.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End feature section -->
<!-- Start stat section -->
<section class="stat-section section-gap-half">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-stat">
<i class="ti-thumb-up"></i>
<h1>
<span class="counter">73</span>+</h1>
<h4>Projects Complete</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-stat">
<i class="ti-face-smile"></i>
<h1>
<span class="counter">69</span>+</h1>
<h4>Happy Customers</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-stat">
<i class="ti-paint-bucket"></i>
<h1>
<span class="counter">54</span>+</h1>
<h4>Website & Apps Developed</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-stat">
<i class="ti-check-box"></i>
<h1>
<span class="counter">14</span>+</h1>
<h4>Years of Experience</h4>
</div>
</div>
</div>
</div>
</section>
<!-- End stat section -->
<!-- Start screenshot section -->
<section class="screenshot-section section-gap-full">
<div class="container">
<div class="section-title">
<h2 class="text-center">Our Featured Work</h2>
</div>
<div class="row">
<div class="screenshot_slider owl-carousel" id="screenshot-carusel">
<div class="item">
<img src="img/screen/screen1.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen2.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen3.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen4.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen5.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen6.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen7.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen1.jpg" alt="" title="">
</div>
<div class="item">
<img src="img/screen/screen2.jpg" alt="" title="">
</div>
</div>
</div>
</div>
</section>
<!-- End screenshot section -->
<!-- Start faq section -->
<section class="home-faq-section faq-section">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-4">
<h2>Frequently Asked Question</h2>
<p>
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorperi.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est voluptatibus, tempora odio dicta
molestiae recusandae delectus perferendis eveniet aspernatur voluptatum earum dolore
necessitatibus odit perspiciatis eos, quidem soluta autem esse.
</p>
</div>
<div class="col-lg-7">
<dl class="accordion">
<dt>
<a href="#" class="active">Started several mistake joy say painful removed reached end.</a>
</dt>
<dd>
Far curiosity incommode now led smallness allowance. Favour bed assure son things yet. She
consisted consulted elsewhere happiness disposing household any old the. Widow downs you
new shade drift hopes small. So otherwise commanded sweetness we improving.
</dd>
<dt>
<a href="#">Although moreover mistaken kindness me feelings do be marianne?</a>
</dt>
<dd>
Far curiosity incommode now led smallness allowance. Favour bed assure son things yet. She
consisted consulted elsewhere happiness disposing household any old the. Widow downs you
new shade drift hopes small. So otherwise commanded sweetness we improving.
</dd>
<dt>
<a href="#">By in no ecstatic wondered disposal my speaking?</a>
</dt>
<dd>
Far curiosity incommode now led smallness allowance. Favour bed assure son things yet. She
consisted consulted elsewhere happiness disposing household any old the. Widow downs you
new shade drift hopes small. So otherwise commanded sweetness we improving.
</dd>
</dl>
</div>
</div>
</div>
</section>
<!-- End faq section -->
<!-- Start footer section -->
<footer class="footer-section section-gap-half">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 footer-left">
<a href="#">
<img src="img/logo-w.png" alt="">
</a>
<p class="copyright-text">© 2017-2019 Design by
3By
<a href="http://mavericksmedia.net" target="_blank">Mavericks Media Team</a>
</p>
</div>
<div class="col-lg-7">
<ul id="social">
<li>
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<ul class="footer-menu">
<li>
<a href="#">Affiliate Program</a>
</li>
<li>
<a href="#">Terms & Conditionss</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Refund Policy</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End footer section -->
<div class="scroll-top">
<i class="ti-angle-up"></i>
</div>
<!--
JS
============================================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="js/vendor/popper.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.parallax-scroll.js"></script>
<script src="js/dopeNav.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>