我有这个菜单标题栏,@ 1280x720看起来像这样:
在宽屏上,about/close
文本(也是侧面菜单按钮)将向左移
我尝试修改css
和{{1}两个元素上的position: fixed
,relative
,absolute
等responsive-menu-pro-header
属性},但效果不佳。
我还必须承认,菜单标题栏元素的制作可能不是最佳形式。我已经使用了很少的编码知识来构建它,可能是这些元素相对于菜单按钮responsive-menu-pro-header-bar-button
/ about
(?)的分辨率有所不同。
问题:
是否有可能将所有元素以不同的分辨率(高于1280x720)保持在一起,从而保留按钮close
/ about
和其余标题菜单元素(文本/联系人链接)的初始位置,就像我们在第一张图片中一样?
我有兴趣找到仅适用于64位Chrome版本69.0.3497.81的解决方案,而不适合跨浏览器或较小的移动设备。
网站测试页here。
close
button#responsive-menu-pro-button,#responsive-menu-pro-container {
display: none;
-webkit-text-size-adjust: 100%
}
#responsive-menu-pro-container {
z-index: 99998
}
@media screen and (max-width: 80000px){
button#responsive-menu-pro-button {
width: 70px;
height: 80px;
position: fixed;
top: 3px;
left: px;
display: inline-block;
transition: transform 2.5s, background-color 0.5s
}
}
#responsive-menu-pro-header {
width: 100%;
padding: 0 5%;
box-sizing: border-box;
top: 0;
right: 0;
left: 0;
display: none;
z-index: 99998
}
#responsive-menu-pro-header .responsive-menu-pro-header-box {
display: inline-block
}
#responsive-menu-pro-header .responsive-menu-pro-header-box,#responsive-menu-pro-header .responsive-menu-pro-header-box img {
vertical-align: middle;
max-width: 100%
}
#responsive-menu-pro-header #responsive-menu-pro-header-bar-logo img {
}
#responsive-menu-pro-header button#responsive-menu-pro-button {
position: relative;
margin: 0;
left: auto;
right: auto;
bottom: auto
}
#responsive-menu-pro-header .responsive-menu-pro-header-box {
margin-right: 2%
}
@media screen and (max-width: 80000px) {
#responsive-menu-pro-header {
position: fixed;
background-color: rgba(255, 255, 255, 0);
height: 80px;
color: rgba(255, 255, 255, 0);
display: block;
font-size: 14px
}
#responsive-menu-pro-header .responsive-menu-pro-header-bar-item {
line-height: 80px
}
#responsive-menu-pro-header a {
color: rgba(255, 255, 255, 0);
text-decoration: none
}
}
答案 0 :(得分:0)
我已经知道了,我在这里进行了更改:
#responsive-menu-pro-header {
padding: 0 5%;
}
替换为:
#responsive-menu-pro-header {
padding: 0 63px !important;
}
现在,无论什么分辨率,菜单标题栏和触发按钮都保持对齐。感谢您的支持。