修复了标题菜单菜单无法在某些高度/宽度切换的问题

Question

我将这段代码放在了下面，我无法正常工作。

由于标题位置固定，我的菜单图标似乎没有在某些高度/宽度上切换链接。

但是我希望标题是固定的。

更奇怪的是，我在我所使用的票务平台的网页上对标题的定位很好。虽然对于整个标头，在CodePen上的定位不合适。 为了查看CodePen上的图标，我必须更改位置。

这就是我正在使用的售票平台的实际页面上的样子…… https://churchsoundbootcamp.ticketspice.com/preview/dd266e3811194dfeaeddc57945e9a3d2

这是CodePen上的同一段代码... https://codepen.io/anon/pen/BemwYj?editors=1010

这也是我在CodePen中使用的相同代码...

<style>

header {
z-index:200;
background-color:#272727;
width:100%;
position: fixed;
top:0;
left:0;
padding:0 32px;
line-height:28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.logo-dark {
display:none;
}
.menu-icon {
width: 60px;
float:right !important;
position: absolute;
top: -10px;
right: 0px;
}
header img {
width:320px;
float:left;
margin-top:10px;
}
.link-container {
float: right;
position: relative;
top: 10px;
}
.link-container li {
list-style-type:none;
display:inline-block;
padding:0 15px;
}
.link-container li a {
text-decoration:none;
text-transform:uppercase;
color:#ffffff;
font-family:"Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:11px;
letter-spacing:1px;
}
@media screen and (max-width:830px) {
.menu-icon {
display:block;
}
.logo {
position: relative;
left: -6px;
top: -10px;
}
.logo-dark {
display:block;
}
.link-container {
float:left !important;
clear:both;
position:relative;
left:-25px;
background-color:#ffffff;
}
.link-container li a {
color:#272727
}
}

</style>

 <header>

<a class="logo logo-dark" href="#"><img src="https://churchsoundbootcamp.com/img/CSBC_new_Logo_Dark.png" alt="" class="logo"></a>
<a class="logo" href="#"><img src="https://churchsoundbootcamp.com/img/new_csbc_logo_idea2.png" alt="" class="logo"></a>
<img alt="Menu Icon" class="menu-icon" src="http://www.colton.dreamhosters.com/csbc-menu-icon.svg">
<ul class="link-container">
    <li><a href="#">Home</a></li>
    <li><a href="#">Why Should I Attend?</a></li>
    <li class="locations"><a href="#">Locations</a></li>
</ul>

</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>

<script>
$(window).bind("load", function() {
   $('.menu-icon').click(function() {
    $('.link-container').toggle();
});
});
</script>

最初，我认为我的问题与我的Jquery有关，但我已经对其进行了测试，并且Jquery可以正常工作。

然后我认为它与脚本标签有关。事实证明，这是我认为的问题的一部分，由于我的订单顺序而定，但现在已解决。

似乎是我固定的标题位置，导致汉堡图标在某些高度/宽度无法正确切换的问题。但是我的问题是我需要修复标题，但我希望它固定在页面顶部。

上面的CodePen链接中列出了我正在使用的代码。

我如何保持标题不变，但不会遇到此问题？