Need help with a push menu

Hello All,

I am having an issue with a push menu. I am using the push menu from this site: http://callmenick.com/post/slide-and-push-menus-with-css3-transitions

The issue I am having is with the Main push menu. When you open and then close it, all content is shifted slightly to the left (see screenshot). The Page push menu doe snot have this issue, and when you open the Page menu after the you open and close the Main menu all content is realigned back as it should be. The Page push menu does not have any issues.

 Can someone take a look at my HTML and my CSS to see if I am missing something.

You can see the issue here: http://designs.totaleeyou.com/jml-development/header-1/h1-menu-3.html#top
LVL 1
MorganAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What am I looking for here? I see the menu slide in and out but the text seems fine?

Also the link you posted has a hash on the end that does not exist on the page - why did you include the # when there is no element with id="top" on the page?
MorganAuthor Commented:
Hello Julian,

Thank you for the quick reply.

The push menus move in and out as expected, however, the MAIN menu when you open and than close it (clicking the close button or just clicking outside of the opened menu), all content shifts to the left (except the header). When opening and closing the MAIN menu you will see the red bar for the PAGE menu no longer stretches across the screen (see screenshot below). If you scroll down you will see the "Popular" heading shifted to the left, with the "P" hidden off the screen on the left side. However all this is fixed When you open the PAGE menu and close it. The "off alignment" caused by the MAIN menu goes away. The "off alignment" only occurs when you open and than close the MAIN menu.

Sorry for the URL. I was testing the "back to top" button that appears when a user scrolls.  I just copied and pasted. The "normal" URL is: http://designs.totaleeyou.com/jml-development/header-1/h1-menu-3.html

Also, for some reason I don't see the screenshot I attached in the original post. I have attached it below (hopefully it works):
off alignment
Julian HansenCommented:
Tricky one - I noticed if you add and remove the article class from the header it fixes the problem.

Not sure why though ... yet - will keep looking.

If you don't get any other responses bump this thread.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

MorganAuthor Commented:
Hello Julian,

I've been messing with it for the past couple of days and just can't figure it out. It happens in all browsers and on mobile.

Thanks for the help.
Julian HansenCommented:
This seems to fix it.

Your header.article (template.css line 133) style looks like this
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 */
}

Open in new window

Does not seem to have any side effects but it does appear to fix the problem.
MorganAuthor Commented:
Hello Julian,

Thanks. that does seem to fix the issue. But this still occurs on the mobile, however, it seems to be tied to the scroll bar, but the page menu does not have this issue. The issue also seems to correct itself after you open the page menu or scroll down after closing the main menu.
Julian HansenCommented:
Try this (in addition to the above change)
Line 467 of template.css - change the padding from padding: 5px to only top and bottom padding (padding: 5px 0)
#search-container {
  background-color: #fdbc5d;
  margin-bottom: 30px;
  padding: 5px 0; /* CHANGE THIS */
  position: absolute;
  top: 84px;
  width: 100%;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MorganAuthor Commented:
Thank you!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.