Javascript 仅当媒体大小超过980px时，才将Wordpress徽标移动到内联主导航（无序列表）的中心
我正试图找出最好的方法，将我的标志移动到主导航的中心，这是一个无序列表（最好是作为一个新的列表项），大小超过980pxJavascript 仅当媒体大小超过980px时，才将Wordpress徽标移动到内联主导航（无序列表）的中心,javascript,php,jquery,css,twitter-bootstrap,Javascript,Php,Jquery,Css,Twitter Bootstrap,我正试图找出最好的方法，将我的标志移动到主导航的中心，这是一个无序列表（最好是作为一个新的列表项），大小超过980px 我使用的是WordPress主题，叫做Buffstrap，它类似于Bootstrap烘焙的空白下划线主题。它使用wp bootstrap navwalker进行导航，徽标通过Customizer上传（客户端需要能够通过Customizer UI更改徽标，并通过仪表板设置菜单项，因此静态解决方案实际上无法实现） 我有一个解决办法，但我不确定这是不是最好的办法。 肯定有什么地方感觉
我使用的是WordPress主题，叫做Buffstrap，它类似于Bootstrap烘焙的空白下划线主题。它使用wp bootstrap navwalker进行导航，徽标通过Customizer上传（客户端需要能够通过Customizer UI更改徽标，并通过仪表板设置菜单项，因此静态解决方案实际上无法实现）
我有一个解决办法，但我不确定这是不是最好的办法。 肯定有什么地方感觉不对劲 我使用的方法是将div#logo包装器从父div移动到主导航“ul”，使用jQuery的insertAfter 在那之后，我添加了一个在调整窗口大小时刷新浏览器的函数，因为当用户调整浏览器大小时，简单地追加/预加或使用insertAfter是不起作用的 我的jQuery我的徽标PHP
在header.php文件中，我将该站点的所有品牌php包装在一个名为“#logo wrapper”的div中
如你所见，我基本上仍在将我包装php的整个div#logo包装器移到“ul”中，因为我不知道如何将logo链接移到第三个“li”之后的新创建的“li”中。 最好至少把它换成一个新的“李”，而不是它自己动 第二个问题：
我想找出一种方法，将div#logo包装移动到“ul”的中心，不管添加了多少新列表项，而不是当前将其移动到第三个“li”之后。我想尝试使用模数或JS的数学运算 第三个问题：
我真的不喜欢每次调整页面大小时都让浏览器刷新，这会让人讨厌。我只需要脚本在大于980px的大小上启动，然后返回到低于980px的方式。就像一个普通的CSS媒体查询一样 CSS问题与JS问题的对比
我只希望这种情况发生在桌面上，所以看起来CSS将是一种方式，但当它不在列表中时，我永远无法让它像这样完美。使用CSS时，最大的问题是定位会滑动，或者在所有浏览器中看起来都不一样，或者如果客户端添加了一个新的菜单项，整个菜单会滑动并关闭，从而使整个导航看起来和操作都很糟糕。因此，JS似乎是最干净的方式来做到这一点，同时保持一切机智 问题：
为了简化我的问题，我知道必须有一个简单的方法来实现这一点。这是一个太普遍的问题，但我还没有在网上找到任何明确的答案来具体实现这一点。有没有人知道一种简单的方法可以通过Javascript、CSS或者仅仅通过navwalker和PHP来实现这一点 我的完整标题PHP
对于问题#1和#2，只需计算中间元素，如图所示：
然后，最后：
$(window).resize(function() {
if ($(window).width() > 980) {
addLogoToMiddle();
} else {
addLogoToSide();
}
});
$(document).ready(function() {
if ($(window).width() > 980) {
addLogoToMiddle();
}
});
（最后执行）
对!！用新的div包装完成了
谢谢你
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();
}
});
});
jQuery（文档）.ready（函数（）{
函数addLogoToMiddle（）{
var middle=Math.ceil（$（“.navbar nav li”）.length/2）；
var logoListItem=$（“#logo wrapper”）.appendTo（“”）；
$（.navbar-nav-li:n子项（“+middle+”））。在（logoListItem）之后；
}
函数addLogoToSide（）{
$（“#小屏幕徽标”）。附加（$（“#徽标包装”）；
//别忘了从导航栏中删除列表项元素
$（“#徽标项”）。删除（）；
}
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>980）{
addLogoMiddle（）；
}否则{
addLogoToSide（）；
}
});
$（文档）.ready（函数（）{
如果（$（窗口）.width（）>980）{
addLogoMiddle（）；
}
});
});
PS做这样的事情——并不是我真正想走的路线。logo divi中有很多php，因此简单地添加logo图像和JS链接并不是动态网站的好选择。是的！对于问题1和2，这解决了所有问题。你是个巫师。谢谢你的提示。我会赞这个答案，但我刚开始更频繁地使用Stack，显然我没有足够的分数：（对于问题三，我可以让徽标从980以下的位置返回，但我还没有完全弄清楚如何在水平拖动浏览器时自动执行此操作。嘿！很乐意帮忙！当你说“我还没有完全弄清楚如何在水平拖动浏览器时自动执行此操作”时，你是什么意思？你能更具体地说明这一点上的问题是什么吗？另外，你不能向上投票，但我相信你仍然可以选择一个被接受的答案。好的，我明白你的意思，对不起。当我把浏览器拖到我的左边，使它变小，或者当模拟设备变小时，导航消失，当我用开发工具检查时，它看起来像我它保持了jQuery应用的相同DOM结构，甚至低于980px。但当我将浏览器拖动到右侧，使其变大，或者模拟更大的设备大小时，它似乎起到了作用。因此，我想如果我必须更具体一些，我不会看到它自动回到左上角，在“ul”之外大小
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package understrap
*/
$container = get_theme_mod( 'understrap_container_type' );
?>
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="hfeed site" id="page">
<!-- ******************* The Navbar Area ******************* -->
<div class="dev-nav-wrapper wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="dev-scrn-skpcntnt-rdr-lnk skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a>
<nav class="dev-navbar-tggl navbar navbar-toggleable-md navbar-inverse bg-inverse">
<?php if ( 'container' == $container ) : ?>
<div class="dev-nav-container container">
<?php endif; ?>
<div id="logo-wrapper">
<button class="dev-navbar-toggler-button navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="dev-navbar-toggler-icon navbar-toggler-icon"></span>
</button>
<!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="dev-navbar-brand navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="dev-navbar-brand-lnk navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?><!-- end custom logo -->
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
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();
}
});
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();
}
});
});