菜单与响应正常

Question

对不起标题......但是当网站来自对PC视图的响应时，我对主菜单的对齐有问题。 （例如，当您将平板电脑从纵向旋转到横向时，或只是将浏览器窗口从600像素宽扩大到1300像素时，就会发生这种情况......）。

要理解我的意思，请执行此操作（只需查看主菜单）：

• 打开我的网站：http://www.piedicosta.com/joomla3/en
• 减少500/600像素宽的浏览器窗口，让css在响应中转换网站。
• 点击右侧的向下箭头打开子菜单。保持子菜单打开。
• 现在放大浏览器窗口，让css在pc视图中转换网站。

你能看到主菜单现在浮在左边吗？

如果刷新页面，则主菜单位于中心位置。

仅当您（从响应视图）打开子菜单项时，才会出现此问题。如果您在响应式视图中没有触摸菜单，则没有任何事情发生，一切似乎都正常。

这个问题有一个简单的原因吗？

感谢您的帮助！

Answer 1

您的问题出在responsive.css?reload文件中。

第25行：

#tm:checked + .main-menu {
/*display: inline-block;*/
display: block;<-- this guy is the problem-->
}

将其更改为：

#tm:checked + .main-menu {
 display: inline-block; 
}

您可以通过CSS media queries修复下一个问题。说实话，我不确定您应该编辑哪个文件，我认为它应该是responsive.css?reload。 注意：在

之后添加CSS媒体代码

@media (min-width: 1024px) {
   ul.main-menu li a {
   padding: 27px 10px 10px;
   }
}
@media (min-width: 1300px) {
    ul.main-menu li a {
    padding: 13px 17px 10px;
   }
}
/*Add code below HERE!!*/

将以下所有代码复制到您的文件中：

/*
* - Mobile
*----------------------------------------------------------------------------
*/
@media only screen and (max-width: 800px) {/* Serve big tablet layout and tablet menu kindle's and hi-res devices ( portrait ) */
    #tm:checked + .main-menu {
    display: inline-block;
    min-width: 100%;
    }
     #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}
@media only screen and (max-width: 768px) {/* Tablets layout*/
    #tm:checked + .main-menu {
    display: inline-block;
    min-width: 100%;
    }
    #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}
@media only screen and (max-width: 400px) {/* Small mobile devices */
 #tm:checked + .main-menu {
    display: inline-block;
    min-width: 100%;
    }
    #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}

PS 我认为您当前的菜单配置不能支持您的要求（没有弄清楚如何使文本对齐而不会弄乱某些东西，但是也许我错了）但是我确实让你的箭头下移向右移动。