minimographite minimographite - 6 months ago 22
CSS Question

Non-mobile navigation moves after switching back from mobile navigation

I have regular navigation and mobile navigation that collapses. Whenever the navigation switches from mobile to regular, the regular navigation shifts down from where it was originally. I am befuddled as to why this is happening and how to fix it. Thanks so much for taking the time to look at this.

It is only a problem in Chrome and Safari, but not Firefox.

Example image:
http://wildmeasure.com/qualitymetalcraft.com/qmcnav.jpg

Answer

A band-aid fix for now could be to absolutely position the menu div to stay in the top right of the screen. The margins keep its position correct, and the responsiveness still works correctly. This just ensures that the div reappears in the correct place after moving from the mobile view.

CSS

.menu-wrapper {
   margin: 55px 55px 0 0;
   width: 650px;
   float: right;
   display: inline;
   position: absolute; /* These last three lines are new */
   top: 0;
   right: 0;
}

This is tested in Chrome, Safari, and Firefox.