Пожалуйста, попробуйте ниже HTML, JS и CSS.Просто измените структуру, создайте отдельный для выпадающего с тем же классом.Затем необходимо добавить атрибут id для меню UL.
HTML:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right" id="myHeader">
<li><a href="#about">about</a></li>
<li><a href="#pricing">menu</a></li>
<li><a href="#featured-dish">featured</a></li>
<li><a href="#reserve">reservation</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://deliveroo.nl/">Deliveroo</a>
<a href="https://www.foodora.nl/">Foodora</a>
<a href="https://www.ubereats.com//">UberEats</a>
</div>
</div>
</li>
</ul>
</div>
JS:
Скопировать и вставить JS в нижний колонтитул.
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
CSS:
ul.sticky {
position: fixed !important;
background: #27752A;
}