Question

我在my Wordpress site创建了自定义菜单。我使用以下代码将新菜单注册到functions.php文件中：

// Add new Footer menu
function register_my_menu() {
    register_nav_menu('new-menu',__( 'New Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );

然后将此行插入当前主题的 footer.php 文件中：

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 
'new_menu_class' ) ); ?>

和菜单显示为页脚，但它显示在列表视图中，我想在页脚中垂直显示，当然可以居中。我使用CSS添加这样的内联样式：

.new_menu_class {
    display:inline-flex;
}

但似乎对页脚中的菜单没有太多改动。这里有什么帮助吗？

Answer 1

You're applying styles to the container of the wp_nav_menu function where the structure of the returned html is

<div class="new_menu_class"> <ul> <li>...

'container_class' (string) Class that is applied to the container. Default 'menu-{menu slug}->container'. https://developer.wordpress.org/reference/functions/wp_nav_menu/

将CSS应用于列表项（我假设您希望水平）。你需要在'menu_class'

的参数下添加这个类

<强> 'menu_class' （字符串）用于形成菜单的ul元素的CSS类。默认'菜单'。

如果您将问题中的同一个类应用于menu_class，则可以应用以下内容：

.new_menu_class {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    width: 80%;
    margin: 0 auto;
    padding: 0;
}

查看您的网站我可以看到您有一个带有媒体查询的设置宽度容器，我建议在应用此设置时也一样，因为在较小的设备上查看时您的UI是清晰的。

垂直对齐Wordpress Footer中自定义创建的菜单

1 个答案: