Skel: Off-canvas navigation doesn't show up in mark-up and sub-naviagation appears too high
Question
I need to turn this HTML5UP template into a Wordpress Theme. So far, I've been overall satisfied with the result , but for some reason the Off-Canvas Navigation (the <div id="titleBar"> , <div id="navPanel"> and all the subsequent code I can see if I check the elements of the original page) doesn't show up in my code and, of course, neither in the mobile view. At the same time, while the dropdown menu (which uses jquery.dropotron.min.js) works, the sub-navigation appears too "high" if compared to the original one.
Clearly, I messed something up but I'm having a hard time trying to figure out what I did wrong. I'm far from being a code expert, that's why I thought to ask for your precious help. For the record, all scripts and styles are loaded in the functions.php page.
This is my mark-up:
<!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 »</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>© 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>
`
Thank you very much in advance
1 answers
solution1
0 2015-11-17 08:17:22
In case someone is interested, the only solution I could find to make this template work as a Wordpress theme -and keeping most of the scripts in the functions.php file at the same time- is leaving in the footer.php jquery.dropotron.min.js and util.js, while all the other scripts (jquery.min.js, skel.min,js, skel-viewport.min.js, main.js) can be placed in functions.php. Just make sure jquery.js is loaded before jquery.dropotron.min.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Mark-up Validation
semantic HTML mark-up
Show HTML mark-up in JFrame or open Browser
off-canvas navigation menu isn't functioning
Foundation 5 off-canvas menu always appears
How to Mark-up a 3 pane page in HTML 5
XHTML Mark-up Validation error
Alter default form mark-up in CakePHP?
How to mark-up phone numbers?
Making off-canvas navigation scrollable
Related Tags