Скел: Навигация вне холста не отображается в разметке, и суб-навигация кажется слишком высокой

Мне нужно превратить этот шаблон HTML5UP в тему Wordpress. До сих пор я был в целом удовлетворен результатом, но по какой-то причине навигация вне холста (<div id="titleBar">, <div id="navPanel"> и весь последующий код, который я вижу, проверяю ли я элементы исходной страницы), не отображается в моем коде и, конечно же, ни в мобильном представлении. В то же время, пока работает раскрывающееся меню (в котором используется jquery.dropotron.min.js), суб-навигация выглядит слишком "высокой" по сравнению с исходной.

Очевидно, я что-то напутал, но мне трудно понять, что я сделал не так. Я далёк от того, чтобы быть экспертом по коду, поэтому я подумал попросить тебя о драгоценной помощи. Для записи все скрипты и стили загружаются на страницу functions.php.

Это моя наценка:

<!doctype html>
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="wp-content/themes/jc/style.css" />
<title>My Blog</title>
<script>
    $(function() {

// Note: make sure you call dropotron on the top level <ul>
    $('#nav > ul').dropotron({ 
        offsetY: -10 // Nudge up submenus by 10px to account for padding
        });
    });
</script>
</head>
<body class="homepage">
<div id="page-wrapper">
<!--HEADER-->
<div id="header-wrapper" class="wrapper">
<div id="header">
<!--LOGO-->
<div id="logo">
<h1><a href="index.html">Name Site</a></h1>
<p>Name Site Subtitle</p>
</div>
<!--MENU-->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
</ul></li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Sub-Link2</a></li>
<li><a href="#">Sub-Link2</a></li>
</ul></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
</div>
</div>
<!--INTRO-->
<div id="intro-wrapper" class="wrapper style1">
<div class="title">WELCOME</div>
<section id="intro" class="container">
<div class="row">
<div id="welcome-message" class="4u 12u(mobile)">
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>
<div class="8u">728x90ads</div>
</div>
</section>
</div>
<!--MAIN CONTENT-->
<div class="wrapper style2">
<div class="title">MAIN CONTENT</div>
<div id="main" class="container">
<div class="row 150%">
<div class="4u 12u(mobile)">
<!--LEFT SIDEBAR-->
<div id="sidebar">
<section class="box">
<header>
<h2>Ipsum nullam luctus</h2>
</header>
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit amet risus elit.</p>
<a href="#" class="button style1">Learn More</a>
</section>
<section class="box">
<header>
<h2>Vitae turpis consequat</h2>
</header>
<ul class="style2">
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic08.jpg" alt="" /></a>
<h3><a href="#">Diam odio lorem</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic09.jpg" alt="" /></a>
<h3><a href="#">Sed duis consequat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic10.jpg" alt="" /></a>
<h3><a href="#">Tellus nulla volutpat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
</ul>
<a href="#" class="button style1">Archives</a>
</section>
</div>
</div>

<div class="8u 12u(mobile) important(mobile)">
<!--CONTENT-->
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=1" rel="bookmark" title="Permanent Link: Hello world!">Hello world!</a></h2>
<div class="date">Mar 29, 2015</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=1#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</p>
</article>
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=57" rel="bookmark" title="Permanent Link: Another Post with Everything In It">Another Post with Everything In It</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=5" rel="category">Child Category I</a>,<a href="http://illusion8.com/test/?cat=2" rel="category">Parent Category I</a>,<a href="http://illusion8.com/test/?cat=3" rel="category">Parent Category II</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=57#comments">1 Comment</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p><img class="alignright" src="http://i35.tinypic.com/990wtx.png" alt="WordPress Logo" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.  <a href="http://illusion8.com/test/?p=57#more-57" class="more-link">Continue reading &raquo;</a></p>
</p>
</article>
<div id="content">  
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=50" rel="bookmark" title="Permanent Link: An Ordered List Post">An Ordered List Post</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=50#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.</p>
<h3>An Ordered List</h3>
<ol>
<li>Vestibulum in mauris semper tortor interdum ultrices.</li>
<li>Sed vel lorem et justo laoreet bibendum. Donec dictum.</li>
<li>Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.</li>
<li>Praesent volutpat eros quis enim blandit tincidunt.</li>
<li>Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.</li>
</ol>
</p>
</article>

<!-- Pagination (Page-Navi WP Plugin) -->
 </div></div></div></div></div></div></div>
<!--FOOTER-->
<div id="footer-wrapper" class="wrapper">
<div id="footer" class="container">
<header class="style1">
<h2>Ipsum sapien elementum portitor?</h2>
<p>Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.</p>
</header>
<hr />
<div class="row 150%">
<div class="6u 12u(mobile)">
<!-- Contact Form -->
<section>
<form method="post" action="#">
<div class="row 50%">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="contact-name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="text" name="email" id="contact-email" placeholder="Email" />
</div>
</div>
<div class="row 50%">
<div class="12u">
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="style1" value="Send" /></li>
<li><input type="reset" class="style2" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
</div>
<div class="6u 12u(mobile)">
<!-- Contact -->
<section class="feature-list small">
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-home">Mailing Address</h3>
<p>Untitled Corporation<br />
1234 Somewhere Rd #987<br />
Nashville, TN 00000-0000</p>
</section>
</div>
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-comment">Social Network</h3>
<p>
<a href="#">@untitled-corp</a><br />
<a href="#">facebook.com/untitled</a>
</p>
</section>
</div>
</div>
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-envelope">Email</h3>
<p><a href="#">webmaster@namesite.com</a></p>
</section>
</div>
</div>
</section>
</div>
</div>
<hr />
</div>
<div id="copyright">
<ul>
<li>&copy; NameSite.com</li>
<li>Design by: <a href="#">NameSite2</a> | Based on: <a href="http://html5up.net">HTML5 UP</a> | Powered by: <a href="http://wordpress.com">Wordpress</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

`

заранее большое спасибо

Источник

1 ответ

В случае, если кому-то интересно, единственное решение, которое я мог бы найти, чтобы этот шаблон работал в качестве темы Wordpress - и в то же время сохранял большинство скриптов в файле functions.php - оставил в footer.php jquery.dropotron.min.js и util.js, в то время как все остальные сценарии (jquery.min.js, skel.min,js, skel-viewport.min.js, main.js) могут быть помещены в functions.php. Просто убедитесь, что jquery.js загружен до jquery.dropotron.min.js

Источник
Другие вопросы по тегам