我的网站在 PC 和移动设备上的导航栏显示有问题

Question

我的编码能力有限，构建了一个portfolio website for myself utilizing WordPress, a pre-built theme called Ocean WP, and the Elementor plugin. The problem that I was facing earlier was that my nav menu had an arrow to indicate a drop down menu on one of my pages.

我真的不喜欢它的样子，所以我向 Wordpress 支持寻求帮助，并得到了这个 CSS 输入代码：

/* eliminate dropdown arrow */
.elementor-navigation .menu-item-has-children > a:after {
   display:none;
}

虽然代码已成功移除箭头，但它仍然存在 my nav menu with an uneven space. Additionally, I'm not sure how to make this code work on tablet/ mobile devices because the arrow still shows up。

Answer 1

您隐藏了箭头，但没有隐藏它的额外间距。这是没有空格和箭头的 css：

.elementor-navigation .eldropdown-toggle {
    display: none;
}
.elementor-navigation .menu-item-has-children > a {
    margin-right: 0;
}
@media screen and (min-width: 56.875em)
    .elementor-navigation .menu-item-has-children > a {
      padding-right: 1em;
    }
}

不过我建议您保留下拉箭头。

我的网站在 PC 和移动设备上的导航栏显示有问题

Having issues with my website's navbar display on PC and mobile

css

wordpress

mobile

navbar

navigationbar