<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="fix-menu">
<div class="fix-menu-inner">
<div class="close-menu-btn">
<span><img src="https://www.quickroofandsiding.com/wp-content/uploads/2023/05/cross-icon-1.png" alt="" /></span>
</div>
<div class="fix-menu-sidebar">
<div class="bottom-nav">
<ul class="nav_col_hd navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.quickroofandsiding.com/about-us/">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.quickroofandsiding.com/our-work/">Our Work</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.quickroofandsiding.com/blog/">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.quickroofandsiding.com/contact-us/">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.quickroofandsiding.com/testimonials/">Reviews</a></li>
</ul>
</div>
<address>
<i class="fa-solid fa-location-dot"></i>
<span>
88 W Industry Ct<br />
Deer Park, NY 11729
</span>
</address>
<div class="phn">
<a href="tel:845-305-6691"><i class="fa-solid fa-phone"></i> 877.524.2159</a>
<a href="mailto:sales@quickroofandsiding.com"><i class="far fa-envelope"></i> sales@quickroofandsiding.com</a>
<a href="mailto:info@quickroofandsiding.com"><i class="far fa-envelope"></i> info@quickroofandsiding.com </a>
</div>
</div>
<div class="fix-menu-rightbar">
<div class="rightbar-inner">
<div class="row justify-content-center">
<div class="col-md-4">
<h4>
Our Services
</h4>
<ul id="menu-main-menu" class="nav_col_hd">
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96 nav-item"><a href="https://www.quickroofandsiding.com/roofing/" class="nav-link">Roofing</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97 nav-item"><a href="https://www.quickroofandsiding.com/siding/" class="nav-link">Siding</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99 nav-item"><a href="https://www.quickroofandsiding.com/windows/" class="nav-link">Windows</a></li>
<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98 nav-item"><a href="https://www.quickroofandsiding.com/doors/" class="nav-link">Doors</a></li>
<li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257 nav-item"><a href="https://www.quickroofandsiding.com/skylight/" class="nav-link">Skylight</a></li>
<li id="menu-item-256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-256 nav-item"><a href="https://www.quickroofandsiding.com/gutters/" class="nav-link">Gutters</a></li>
</ul>
</div>
<div class="col-md-6">
<h4>
Area We serve
</h4>
<ul class="sub-menu inner_menu_area">
<li><a href="https://www.quickroofandsiding.com/centerport/" class="nav-link">CENTERPORT</a></li>
<li><a href="https://www.quickroofandsiding.com/commack/" class="nav-link">COMMACK</a></li>
<li><a href="https://www.quickroofandsiding.com/cold-spring-harbor/" class="nav-link">Cold Spring Harbor</a></li>
<li><a href="https://www.quickroofandsiding.com/deer-park/" class="nav-link">Deer Park</a></li>
<li><a href="https://www.quickroofandsiding.com/dix-hills/" class="nav-link">Dix Hills</a></li>
<li><a href="https://www.quickroofandsiding.com/east-northport/" class="nav-link">EAST NORTHPORT</a></li>
<li><a href="https://www.quickroofandsiding.com/greenlawn/" class="nav-link">GREENLAWN</a></li>
<li><a href="https://www.quickroofandsiding.com/hauppauge/" class="nav-link">HAUPPAUGE</a></li>
<li><a href="https://www.quickroofandsiding.com/huntington-ny/" class="nav-link">Huntington, NY</a></li>
<li><a href="https://www.quickroofandsiding.com/islandia/" class="nav-link">ISLANDIA</a></li>
<li><a href="https://www.quickroofandsiding.com/kings-park/" class="nav-link">KINGS PARK</a></li>
<li><a href="https://www.quickroofandsiding.com/lloyd-harbor/" class="nav-link">Lloyd Harbor</a></li>
<li><a href="https://www.quickroofandsiding.com/melville-ny/" class="nav-link">Melville, NY</a></li>
<li><a href="https://www.quickroofandsiding.com/nesconset/" class="nav-link">NESCONSET</a></li>
<li><a href="https://www.quickroofandsiding.com/northport/" class="nav-link">Northport</a></li>
<li><a href="https://www.quickroofandsiding.com/ronkonkoma/" class="nav-link">RONKONKOMA</a></li>
<li><a href="https://www.quickroofandsiding.com/saint-james/" class="nav-link">SAINT JAMES</a></li>
<li><a href="https://www.quickroofandsiding.com/smithtown-ny/" class="nav-link">Smithtown, NY</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="trans-header">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.jpg" alt="" /> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="location-btn">
<div class="input-group">
<label class="input-group-text" for=""><i class="fa-solid fa-location-dot"></i></label>
<select class="location-select location" aria-label="Location select">
<option selected><i class="bi bi-funnel"></i> Choose Location</option>
<option value="location1">185 Madison Avenue, Suite 1701, New York, NY 10036</option>
<option value="location2">6925 Sherman Lane, Pennsauken, NJ 08110</option>
<option value="location3">1009 N. Shannon Ave., Plant City, FL 33566</option>
<option value="location4">10724 Bloomfield Avenue, SantaFe Springs, CA 90670</option>
<option value="location5">13601 FM 529 Suite D, Houston, TX 77041</option>
<option value="location6">29 Edinburg Lane, East Brunswick, NJ 08816</option>
</select>
</div>
<!--a href="locations.html" class="loc-btn"><i class="fa-solid fa-location-dot"></i> Our Locations</a-->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a href="<?php echo get_permalink(4237); ?>" class="common-btn red-btn req-btn ms-auto">
<span>Request a quote</span>
</a>
<a href="#" class="burger-menu">
<span class="burger-icon">
<span></span>
</span>
</a>
</div>
</div>
</nav>
</header>
.fix-menu .nav_col_hd li::after {
display: none;
}
.fix-menu {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
display: none;
top: 0;
left: 0;
background: #fff;
}
.fix-menu.open-fix-menu{
display: block;
}
.trans-bg {
background: rgba(255, 255, 255, 0.94);
}
.fix-menu-sidebar {
width: 450px;
background: linear-gradient(to bottom, rgba(2, 59, 159, 1) 0%, rgba(2, 106, 221, 1) 100%);
padding: 50px 40px;
clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 0);
}
.fix-menu-inner {
position: relative;
height: 100%;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
.fix-menu-sidebar ul li a {
color: #fff;
font-size: 22px;
display: block;
margin-bottom: 15px;
}
.fix-menu-sidebar ul li a:hover {
transform: scale(1.05);
}
.fix-menu-rightbar {
width: calc(100% - 465px);
display: flex;
flex-wrap: wrap;
align-items: center;
}
.rightbar-inner {
width: 100%;
}
.rightbar-inner ul li a {
font-weight: 500;
color: #000;
}
.rightbar-inner ul li a:hover {
color: #0448c6 !important;
}
.fix-menu-sidebar address {
color: #fff;
font-weight: 500;
line-height: 1.5;
padding-left: 20px;
margin-top: 40px;
margin-bottom: 15px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.fix-menu-sidebar address i {
margin-left: -20px;
margin-right: 5px;
}
.rightbar-inner ul li {
margin: 0px 0;
position: relative;
padding-left: 10px;
}
.rightbar-inner ul li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
background: #000;
width: 16px;
height: 16px;
border: 4px solid #fff;
outline: 2px solid #0448c6;
border-radius: 50%;
}
.rightbar-inner ul li a {
text-transform: uppercase;
}
.rightbar-inner h4 {
margin-bottom: 30px;
font-size: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
height: 40px;
}
.rightbar-inner h4 img {
width: 50px;
margin-right: 10px;
}
.rightbar-inner h4 span {
display: none;
}
.fix-menu-sidebar .phn {
margin-bottom: 20px;
color: #fff;
}
.fix-menu-sidebar .phn a {
color: #fff;
display: block;
margin-bottom: 15px;
}
.fix-menu-sidebar .social-footer {
margin-top: 20px;
}
.close-menu-btn {
position: absolute;
right: 40px;
top: 40px;
width: 30px;
cursor: pointer;
}
.close-menu-btn img {
width: 100%;
}
$(document).ready(function() {
$('.burger-menu').on('click', function(){
$('.fix-menu').toggleClass('open-fix-menu');
});
$('.close-menu-btn').on('click', function(){
$('.fix-menu').removeClass('open-fix-menu');
});
$('.mobile-nav-icon').on('click', function(){
$('.mobile-menu-fixed').toggleClass('open-mobile-menu');
});
$('.close-mobile-btn').on('click', function(){
$('.mobile-menu-fixed').removeClass('open-mobile-menu');
});
$('.mobile-menu>.menu-item-has-children').on('click', function(){
$('.sub-menu').hide();
$(this).children('.sub-menu').toggle();
});
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 600;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 2500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
