我最近设置了 jQuery 脚本，仅在宽度超过 980 处将徽标移动到主导航的中心。它在单个无序列表上效果很好。但是当我在导航中添加几个无序列表时，它就变得混乱了。我不确定我在这里做错了什么。如果我再添加一个无序列表，我可以让它工作，但这是我能做到的。
非工作版本：https ://codepen.io/robwdev/pen/Ngeewa
工作版本：https ://codepen.io/robwdev/pen/zzyyJQ
jQuery：
jQuery(document).ready(function() {
function addLogoToMiddle() {
var middle = Math.ceil($(".navbar-nav li").length / 2);
var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
$(".navbar-nav li:nth-child(" + middle + ")").after(logoListItem);
}
function addLogoToSide() {
$('#small-screen-logo').append($('#logo-wrapper'));
// don't forget to remove the list item element from the navbar
$('#logo-item').remove();
}
$(window).resize(function() {
if ($(window).width() > 980) {
addLogoToMiddle();
} else {
addLogoToSide();
}
});
$(document).ready(function() {
if ($(window).width() > 980) {
addLogoToMiddle();
}
});
});