使用推送菜单进行操作

Question

我遇到了推送菜单的问题。我正在使用此网站的推送菜单：http://callmenick.com/post/slide-and-push-menus-with-css3-transitions

我遇到的问题是主推菜单。当您打开然后关闭它时，所有内容都会略微向左移动（请参见屏幕截图）。 Page push菜单会出现此问题，当您打开并关闭主菜单后打开Page菜单时，所有内容都会按原样重新调整。页面推送菜单没有任何问题。

有人可以查看我的HTML和我的CSS，看看我是否遗漏了什么。

您可以在此处查看问题：http://designs.totaleeyou.com/jml-development/header-1/h1-menu-3.html#top

Answer 1

所以我需要更改header.article去除宽度：100vw;

header.article {
background-attachment: scroll, scroll;
background-clip: border-box, border-box;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 140, 153, 0.6), rgba(0, 140, 153, 0.6)), url("../images/design/lt-campus.jpg");
background-origin: padding-box, padding-box;
background-position: 0 0%, 0 0;
background-repeat: repeat, repeat;
background-size: cover;
height: 265px;
width: 100vw; /* Remove this */
}

虽然上面的代码修复了此问题的桌面版本，但我不得不对此问题的移动版本进行其他更改。我不得不从填充更改填充：5px;填充：5px 0;

#search-container {
background-color: #fdbc5d;
margin-bottom: 30px;
padding: 5px 0; /* CHANGE THIS */
position: absolute;
top: 84px;
width: 100%;
}