Question

我目前很沮丧。我想以下列方式设置此自定义菜单的样式：我希望在保持其自定义下划线的同时将其置于中心位置。下划线应始终保持相同的长度，而单词居中并且在下划线上方约4px，这样字母不会直接触及下划线。应该（如果可能）背景图像不被菜单的白色背景颜色阻挡。我尝试过使用

display: inline-block; margin: 0 auto;

同时将其他菜单 ul 和 li 元素归零，因为在大多数解决方案中建议有些类似的问题但到目前为止还没有工作。还有像

这样的东西

margin: 0 20%;
float: left; /*or right, re displays the underline but messes up the text in the below section. It all just goes to the left or right just like display: inline-block */

无法跨屏幕工作。同样重要的是要注意，我没有提出任何关于粘性菜单的信息，但菜单很粘，这很烦人。非常感谢你。

Answer 1

如果您不需要支持真正的旧浏览器，请使用flexbox！

.menu-navmenu_tr-container {
    display: flex;
}

以及这种风格：

.elementor-widget-wp-widget-nav_menu ul {
    background-color: transparent;
    display: none;
    list-style: none;
    padding: 0 1em;
    margin: 0 auto;
    max-width: 1080px;
    width: 80%;
    float: left;
}

删除宽度并浮动。

对于已解决的问题，这是执行此操作的样式 - 它位于custom.css：

中

@media screen and (min-width: 60em)
.anchor-menu-fixed.elementor-widget-wp-widget-nav_menu, .site-header-hidden.elementor-widget-wp-widget-nav_menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 7;
}

使用CSS自定义菜单样式

1 个答案: