WordPress主导航菜单显示项目符号且非横向排列问题求助

看起来你的导航菜单没正确适配Bootstrap样式，还保留着WordPress默认的列表格式，咱们一步步来搞定它：

问题根源分析 #

从你贴的代码来看，你已经在尝试把Bootstrap的导航类套到WordPress菜单上，但有两个关键细节没处理到位：

1. WordPress的wp_nav_menu会自动生成<ul>容器，默认的列表样式（项目符号、垂直布局）还在生效
2. 你给容器加了main-navigation类，但原有CSS的flex规则优先级不够，没覆盖默认样式

具体修复步骤 #

1. 更新CSS，强制覆盖默认列表样式 #

把你的菜单相关CSS替换成下面这段，确保彻底去掉项目符号并强制横向排列：

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/* 移除默认列表样式 */
.main-navigation ul,
.nav.navbar-nav.navbar-right,
.nav.navbar-nav.navbar-right li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 强制导航项横向排列 */
.nav.navbar-nav.navbar-right {
    display: flex;
    flex-direction: row;
    gap: 1.2rem; /* 可选：给菜单项之间添加间距 */
}

/* Small menu. */
.menu-toggle, .main-navigation.toggled ul {
	display: none;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

/* 保留原有其他导航相关CSS */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

2. 调整WordPress菜单代码结构 #

你最后一段的wp_nav_menu代码基本正确，但把容器从nav改成div更贴合Bootstrap的原始结构，避免样式冲突：

<?php
wp_nav_menu( array(
	'theme_location' => 'primary',
	'container' => 'div', // 改为div匹配Bootstrap的.navbar-collapse容器类型
	'container_class' => 'navbar-collapse collapse main-navigation',
	'menu_class' => 'nav navbar-nav navbar-right'
) );
?>

记得在WordPress后台「外观-菜单」里，把你的菜单分配到primary位置哦。

3. 强制刷新浏览器缓存 #

修改完CSS后，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，确保浏览器加载最新的样式文件，旧缓存可能会导致修改不生效。

内容的提问来源于stack exchange，提问作者Filmguy2017