| Server IP : 104.21.21.239 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/forum/forum.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Single - Forums / Community | Canvas</title>
</head>
<body class="stretched search-overlay">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="full-header header-size-md" data-mobile-sticky="true">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo">
<a href="demo-forum.html">
<img class="logo-default" srcset="demos/forum/images/canvasforum.png, demos/forum/images/[email protected] 2x" src="demos/forum/images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="header-misc ms-0">
<!-- Top Search
============================================= -->
<div id="top-search" class="header-misc-icon">
<a href="#" id="top-search-trigger"><i class="uil uil-search"></i><i class="bi-x-lg"></i></a>
</div><!-- #top-search end -->
<!-- Top Account
============================================= -->
<div class="header-misc-icon">
<a href="#" id="notifylink" data-bs-toggle="dropdown" data-bs-offset="0,15" aria-haspopup="true" aria-expanded="false" data-offset="12,12"><i class="bi-bell notification-badge"></i></a>
<div class="dropdown-menu dropdown-menu-end py-0 m-0 overflow-auto" aria-labelledby="notifylink" style="width: 320px; max-height: 300px">
<span class="dropdown-header border-bottom border-f5 fw-medium text-uppercase ls-1">Notifications</span>
<div class="list-group list-group-flush">
<a href="#" class="d-flex list-group-item">
<img src="demos/articles/images/authors/2.jpg" width="35" height="35" class="rounded-circle me-3 mt-1" alt="Profile">
<div class="media-body">
<h5 class="my-0 fw-normal text-muted"><span class="text-dark fw-bold">SemiColonWeb</span> has replied on your post <span class="text-dark fw-bold">Package Generator – Approx time for a file.</span></h5>
<small class="text-smaller">10 mins ago</small>
</div>
</a>
<a href="#" class="d-flex list-group-item">
<i class="bi-check-lg badge-icon bg-success text-white me-3 mt-1"></i>
<div class="media-body">
<h5 class="my-0 fw-normal text-muted"><span class="text-dark fw-bold">SemiColonWeb</span> has marked to your post as solved.</h5>
<small class="text-smaller">2 days ago</small>
</div>
</a>
</div>
</div>
</div>
<!-- Top Account
============================================= -->
<div class="header-misc-icon profile-image">
<a href="#" id="profilelink" data-bs-toggle="dropdown" data-bs-offset="0,15" aria-haspopup="true" aria-expanded="false" data-offset="12,12"><img class="rounded-circle" src="demos/forum/images/user.png" alt="User"></a>
<div class="dropdown-menu dropdown-menu-end py-0 m-0" aria-labelledby="profilelink">
<a class="dropdown-item" href="demo-forum-edit.html"><i class="bi-pencil-square me-2"></i>Edit Profile</a>
<a class="dropdown-item" href="demo-forum-single.html"><i class="bi-text-left me-2"></i>Your Topics</a>
<a class="dropdown-item" href="demo-forum-signout.html"><i class="bi-box-arrow-right me-2"></i>Sign Out</a>
</div>
</div>
</div>
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
<ul class="menu-container">
<li class="menu-item"><a class="menu-link" href="demo-forum.html"><div>Home</div></a></li>
<li class="menu-item current"><a class="menu-link" href="demo-forum-single.html"><div>Topic Page</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-forum.html#modal-signin"><div>Create</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-forum-profile.html"><div>Profile</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-forum-search-result.html"><div>Search Page</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-forum-signin.html"><div>Sign In Page</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
<form class="top-search-form bg-alt dark" action="search.html" method="get">
<div class="container row justify-content-center">
<div class="col-sm-8">
<input type="text" name="q" class="form-control form-control-lg mb-5 border-color" value="" placeholder="Type Your Query & Hit Enter.." autocomplete="off">
<div class="row col-mb-30">
<div class="col-md-6">
<div class="widget widget_links">
<h4 class="">Recent Topics</h4>
<ul>
<li><a href="#">Package Generator – Approx time for a file</a></li>
<li><a href="#">Open sub-menu touching menu-item name</a></li>
<li><a href="#">Portfolio Overlay Slide fadein fadeout</a></li>
<li><a href="#">Show menu .dropdown-menu down only</a></li>
<li><a href="#">Couldnt Generate Package Snippet</a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="widget widget_links">
<h4 class="">Helpful Documentation</h4>
<ul>
<li><a href="#">How to Install</a></li>
<li><a href="#">How to setup Niche Demos</a></li>
<li><a href="#">Header Layouts and Styles</a></li>
<li><a href="#">Setup Forms</a></li>
<li><a href="#">Setup RTL</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Page Title
============================================= -->
<section class="page-title bg-color py-6 page-title-center">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h2 class="h2" style="font-weight: 800">Jump In Content When Using Include-Header Class</h2>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mt-4">
<li class="breadcrumb-item"><a class="alt-color" href="#">Forum</a></li>
<li class="breadcrumb-item"><a class="alt-color" href="#">Canvas</a></li>
<li class="breadcrumb-item text-black-50 active" aria-current="page">Jump In Content When Using Include-Header Class</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container mw-md">
<div class="topic-post">
<div class="row g-0 justify-content-between align-items-center border-top border-bottom py-3 mb-4">
<div class="col-9">
<div class="d-flex align-items-center">
<img src="demos/articles/images/authors/2.jpg" alt="Author" class="rounded-circle me-2" width="50" height="50">
<div>
<h5 class="mb-0 h6 fw-semibold"><a class="text-dark" href="#">Gordon Norman</a></h5>
<small class="text-muted mb-0 fw-normal">August 15, 2020, 7:54 AM</small>
</div>
</div>
</div>
<div class="col-auto">
<a href="#" id="editlink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h icon-2x alt-color"></i></a>
<div class="dropdown-menu dropdown-menu-links rounded shadow-sm dropdown-menu-end py-0 m-0" aria-labelledby="editlink">
<a class="dropdown-item rounded-top" href="#"><i class="bi-pencil-square me-2"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="bi-x-circle me-2"></i>Close</a>
<a class="dropdown-item" href="#"><i class="bi-arrow-up me-2"></i>Stick On Top</a>
<a class="dropdown-item" href="#"><i class="fa-solid fa-code-merge me-2"></i>Merge</a>
<a class="dropdown-item" href="#"><i class="bi-trash3 me-2"></i>Trash</a>
<a class="dropdown-item" href="#"><i class="bi-exclamation-triangle me-2"></i>Spam</a>
<a class="dropdown-item" href="#message-reply" data-scrollto="#message-reply"><i class="bi-arrow-90deg-left me-2"></i>Reply</a>
</div>
</div>
</div>
<div class="clear"></div>
<p>Hi,<br><br>
First of all, great template, I was working on a new site with version 5.9 when version 6 came out so I’m starting again with version 6.<br><br>
I have 2 things so far that I would like to see if there is a solution for this:<br></p>
<ol class="ms-3">
<li class="mb-4">If you are trying to build a page that has a transparent header (similar to this one <a href="http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html" rel="nofollow"><u>http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html</u></a> ) and you add the include-header class on the hero image / slider section, then once the page has loaded and the “header-wrap-clone” element is added the whole graphic jump down, what is not very nice. Is there any way that I can do to fix this? You can see the jump on your demo page <a href="http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html" rel="nofollow"><u>http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html</u></a></li>
<li>I like the sticky-footer option where the footer is static in the background and the content slide off it, the only problem I have is that, if there is not enough content on the page the footer is not sticking to the bottom of the page as in 5.9, the footer is riding up the page. (see image) is there anything that I can do to make the footer always stick to the bottom of the page?</li>
</ol>
<p>Thanks <strong>Rob</strong>.</p>
<div class="col-1 pb-3 px-0">
<hr>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-4">
<a href="images/portfolio/full/9-1.jpg" data-lightbox="image">
<img src="images/portfolio/4/9-1.jpg" alt="Image" class="mb-1 rounded-1">
</a>
<div class="d-flex align-items-center justify-content-between px-2">
<h5 class="mb-0">Index.html</h5>
<a href="#"><i class="bi-trash3"></i></a>
</div>
</div>
</div>
</div>
<div class="topic-post reply mt-5 p-4 p-md-5 border-top border-width-5 border-color">
<div class="row justify-content-between align-items-center mb-4">
<div class="col-9">
<h2 class="mb-0 fw-bold"><i class="bi-check-lg text-success"></i> Reply</h2>
</div>
<div class="col-auto">
<a href="#" class="badge bg-success text-white p-2">Solved</a>
</div>
</div>
<div class="row g-0 justify-content-between align-items-center border-top border-bottom border-color py-3 mb-4">
<div class="col-9">
<div class="d-flex align-items-center">
<img src="demos/forum/images/user.png" alt="Author" class="rounded-circle me-2" width="50" height="50">
<div>
<h5 class="mb-0 h6 fw-semibold align-middle"><a class="text-dark" href="#">SemiColonWeb</a><span class="badge bg-info text-white p-1 ms-1">Team</span></h5>
<small class="text-muted mb-0 fw-normal">August 11, 2020, 12:03 PM</small>
</div>
</div>
</div>
<div class="col-auto">
<a href="#" id="editlink2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="uil uil-ellipsis-h icon-2x alt-color"></i></a>
<div class="dropdown-menu dropdown-menu-links rounded shadow-sm dropdown-menu-end py-0 m-0" aria-labelledby="editlink2">
<a class="dropdown-item rounded-top" href="#"><i class="bi-pencil-square me-2"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="bi-x-circle me-2"></i>Close</a>
<a class="dropdown-item" href="#"><i class="bi-arrow-up me-2"></i>Stick On Top</a>
<a class="dropdown-item" href="#"><i class="fa-solid fa-code-merge me-2"></i>Merge</a>
<a class="dropdown-item" href="#"><i class="bi-trash3 me-2"></i>Trash</a>
<a class="dropdown-item" href="#"><i class="bi-exclamation-triangle me-2"></i>Spam</a>
<a class="dropdown-item" href="#message-reply" data-scrollto="#message-reply"><i class="bi-arrow-90deg-left me-2"></i>Reply</a>
</div>
</div>
</div>
<div class="clear"></div>
<p>Hello,</p>
<p>Thank You so much for the Kind Words! <img draggable="false" class="emoji" alt="🙂" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg" width="14"></p>
<ol class="ms-3"><li><p>You can see this Jump due to the Page Transitions being disabled by default in the Latest Version of Canvas. If you enable it again: <a class="text-dark fw-semibold" href="http://docs.semicolonweb.com/docs/getting-started/page-transition/" rel="nofollow"><u>http://docs.semicolonweb.com/docs/getting-started/page-transition/</u></a>, this will be hidden. As the Headers in Canvas 6 is Flexible and does not use any Fixed Heights, we have to calculate the Heights for the Header using JS and it is being applied while the Page is being Loaded. We will try to continue finding ways to make it more elegant in the Future Versions. So, simply adding the <code>.page-transition</code> Class to the <strong><body></strong> tag should fix this.</p></li>
<li><p>We have removed the JS Code that used to calculate this in the Latest Version to minimize JS Usage. Consider using a Minimum Height for the <code>#content</code> DIV by simply adding the <code>.min-vh-75</code> Class to it. This will add a minimum height of <strong>75%</strong> Viewport Height to the <code>#content</code> Area which would make the Footer sticky at the bottom always and will also be reliable on CSS which would be way faster and easier on the browsers too. If this would not be an optimal solution for you, please let us know.</p></li></ol>
<p>Hope this Helps!</p>
<p>Let us know if we can help you with anything else or if you find any further issues.</p>
<div class="col-1 pb-3 px-0">
<hr>
</div>
<span class="fw-semibold">
Thanks & Regards,<br>
SemiColonWeb Team.
</span>
</div>
<div id="message-reply" class="topic-form mt-5">
<h3 class="h2 fw-bolder mb-4">Reply to the Message</h3>
<form class="row" action="#" method="post" enctype="multipart/form-data">
<div class="col-12 form-group mb-4">
<textarea name="post-message" id="post-message" class="form-control" cols="30" rows="10"></textarea>
</div>
<div class="clear"></div>
<div class="col-6 form-group">
<small class="text-muted">Maximum file size allowed is 2048 KB.</small>
<div class="form-file">
<input type="file" class="form-control" id="file-input">
</div>
</div>
<div class="clear"></div>
<div class="col-12 form-group mb-1">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label text-transform-none ls-0 mb-0 fw-semibold" for="inlineCheckbox1">Set as a Private Reply</label>
</div>
</div>
<div class="clear"></div>
<div class="col-12 form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label text-transform-none ls-0 mb-0 fw-semibold" for="inlineCheckbox2">Email me when Someone Replies</label>
</div>
</div>
<div class="col-12">
<button type="submit" name="submit" class="button button-large bg-alt py-2 rounded-1 fw-medium text-transform-none ls-0 ms-0">Submit Now</button>
</div>
</form>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark" style="background-color: #101010;">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="widget">
<div class="row col-mb-30">
<div class="col-lg-3 col-6 widget_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-lg-3 col-6 widget_links">
<ul>
<li><a href="#">Shop</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-lg-3 col-6 widget_links">
<ul>
<li><a href="#">Corporate</a></li>
<li><a href="#">Agency</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">One Page</a></li>
</ul>
</div>
<div class="col-lg-3 col-6 widget_links">
<ul>
<li><a href="#">Corporate</a></li>
<li><a href="#">Agency</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">One Page</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 mt-5 mt-lg-0 text-center text-lg-end">
<div class="widget">
<div class="row">
<div class="col-12 mb-3">
<small>Call Us:</small>
<h4 class="h4">+(1) 22 55412474</h4>
</div>
<div class="col-12 d-flex justify-content-center justify-content-lg-end">
<a href="#" class="social-icon si-small bg-contrast-100 h-bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon si-small bg-contrast-100 h-bg-delicious">
<i class="fa-brands fa-delicious"></i>
<i class="fa-brands fa-delicious"></i>
</a>
<a href="#" class="social-icon si-small bg-contrast-100 h-bg-paypal">
<i class="fa-brands fa-paypal"></i>
<i class="fa-brands fa-paypal"></i>
</a>
<a href="#" class="social-icon si-small bg-contrast-100 h-bg-waze">
<i class="fa-brands fa-waze"></i>
<i class="fa-brands fa-waze"></i>
</a>
</div>
<div class="col-12 mt-5 text-white-50 text-smaller">
All Rights Reserved <br>© 2023 by SemiColonWeb<br>
</div>
</div>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- TinyMCE Plugin -->
<script src="js/components/tinymce/tinymce.min.js"></script>
<script>
jQuery(document).ready( function(){
jQuery('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
jQuery('.custom-file-label').html(fileName);
});
tinymce.init({
selector: '#post-message',
menubar: false,
setup: function(editor) {
editor.on('change', function(e) {
editor.save();
});
}
});
});
</script>
</body>
</html>