Menu overlapping with Logo

Question

I am building a website with wordpress. The url is here

My problem is that the menu is overlapping with the logo until the screen size is 1300px ... can i force the mobile / burger menu to appear until it has 1300px or is there any other solution for this?

Answer 1

尝试一下：

@media only screen and (max-width: 1300px) {

    .main_menu {
        display: none !important;
    }

    .mobile_menu_button {
        display: table !important;
    }
}

Answer 2

下面是一个示例，该示例使用媒体查询将导航放到徽标下方（如果屏幕宽度大于1300px且小于1500px（因为在宽屏上看起来很好））。

@media (min-width: 1300px) and (max-width: 1500px) {
    header .header_inner_left {
    position: relative;
    left: 0px;
    top: 0;
    }
}

您必须将其添加到样式表中并使用查询的维度，但这应该可以解决冲突问题。您还可以通过根据屏幕尺寸切换样式表中的样式，来使用媒体查询（就像您的主题将导航变成汉堡包导航一样）。有多种样式可以修改以创建功能性的移动导航，因此，如果您希望避免浏览核心主题代码，这种方法可能是最简单的。

希望有帮助！祝你好运:)