css 居中的水平菜单（WP核心菜单）

Posted 2021-05-13

template code:  <?php wp_nav_menu( array( 'theme_location' => 'grants-menu' ) ); ?>

functions.php (register the location):  function register_homepage_grants() {
  register_nav_menu('homepage_grants',__( 'Homepage Grants' ));
}
add_action( 'init', 'register_homepage_grants' );

/* Set up menu in dashboard and assign to location. */

.menu-grants-menu-container {
	background-color: rgba(255,210,70,.95);
	margin-top: 0;
	color: #4f2683;
	height: 100%;
	border: 0;
}
ul#menu-grants-menu {
	text-align: center;
	padding: 0;
	margin-top: 5px;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	display: block;
}
li#menu-item-4862 ,
li#menu-item-4863 ,
li#menu-item-4864 {
	list-style-type: none;
	display: inline-block;
	float: left;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}
ul#menu-grants-menu li#menu-item-4862 ,
ul#menu-grants-menu li#menu-item-4863 ,
ul#menu-grants-menu li#menu-item-4864 {
	float: none;
	padding: 15px 50px;
}

li#menu-item-4862 a,
li#menu-item-4863 a,
li#menu-item-4864 a {
	display: inline-block;
}