两个导航栏都显示在错误的断点上

Question

我的站点(www.acweb.com.cy)在屏幕右上角显示肚脐有问题。当它以768 of的宽度调整大小时，它会同时显示“js-fh5co-nav--切换fh5co-nav-开关”和常规导航条，这是大屏幕的水平导航条。所以，当它在我的小ipad上打开时，它会同时显示两个肚脐。

其次，我对sass不太了解，我正在使用考拉程序来编辑模板scss文件。此外，我从scss文件名中删除了所有_(下划线)，导致考拉不读取文件。最后，当我加载站点并在火狐中打开开发人员检查器时，导航条被读取为_navbar.scss而不是navbar.scss，因为我将它重命名了。

谢谢你的帮助！！

​

​

Answer 1

您的响应媒体查询代码在某些地方发生冲突，您需要纠正。这就是为什么两个navbar在768px to 765px中都是可见的。

这就是你的max-width和min-width目前的情况如下，

@media screen and (min-width: 768px){
.......
.....
}
@media screen and (max-width: 768px){
.......
.....
}

你需要增加或缩小其中任何一个宽度。您可以进行如下更改，

@media screen and (min-width: 769px){
.......
.....
}
@media screen and (max-width: 768px){
.......
.....
}

Answer 2

所以，当它在我的小ipad上打开时，它会同时显示两个肚脐。

iPads的像素密度与普通的计算机监视器不同，这在使用css媒体查询时可能会让人感到困惑，甚至可能会欺骗您的css以为它在一个完全不同的media query中。

我建议查看这个站点，以了解为什么您的iPad显示的网站与您的桌面/膝上型计算机不同：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

有关像素密度的更多信息，特别是苹果的Retina显示器，您需要这样做：显示

Answer 3

快速解决(不是最好的解决方案)

在main.js文件的底部，在所有其他方法之后添加这一行：

$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');

所以你的职能是：

// Document on load.
$(function(){

    parallax();

    burgerMenu();

    clickMenu();

    windowScroll();

    navigationSection();

    goToTop();


    // Animations
    homeAnimate();
    introAnimate();
    workAnimate();
    testimonialAnimate();
    servicesAnimate();
    aboutAnimate();
    countersAnimate();
    contactAnimate();

    $('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});

当两个类都用于导航时，这将删除它们。