CSS Hamburger stops working when jQuery library is loaded into project - html

Question

I am trying to utilize CSS for a responsive hamburger menu and the jQuery for some drop down menu items further down my webpage. The CSS hamburger menu works perfectly fine when I don't have the jQuery library loaded into my project. However as soon as I do load in the jQuery library the CSS hamburger stops working. I am not getting any error messages. How do I fix this?
This is my first question in the stackoverflow community am I am a beginner with coding. Any and all help is appreciated.
Hamburger in index.html:
</head>
<header class="header">
<a href="" class="logo"><img src="./img/consulting.png" alt=""><h1><span class ="highlight"></span>
Consulting</h1></a>
<input class="menu-btn" type="checkbox" id="menu-btn"/>
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Hamburger in style.css:
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.5;
padding:0;
margin:0;
background-color:#f4f4f4;
}
a {
color: #000;
}
.header h1 {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
font-weight: bold;
width: 300px;
margin-top: 12px;
margin-bottom: 5px;
}
/*Global*/
.container{
width:100%;
margin:auto;
overflow:hidden;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
border-bottom: #e8491d 3px solid;
z-index: 3;
}
.header img {
float: left;
width: 60px;
height: 60px;
margin-bottom: 5px;
margin-right: 5px;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
margin-top: 5px;
padding: 10px 30px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
float: right;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 10px;
padding-right: 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 300px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 23px 30px;
margin-top: 5px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
padding-left: 5px;
padding-right: 5px;
}
}