使用 CSS 自定义菜单样式

Question

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

display: inline-block; margin: 0 auto;

同时清零其他菜单 ul 和 li 元素在大多数类似问题的解决方案中都有所建议，但 none 到目前为止一直有效。还有类似

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 自定义菜单样式

Custom Menu Styling With CSS

css

wordpress

elementor