I have a jquery.mmenu that is located about half way down the page in desktop view and I believe the script is positioning it as the first item in the body.
We are only using mmenu on mobile devices in a responsive layout so therefore we would like it to not affect any of our desktop styles.
Is there a way to remove the positioning and allow our menu to be positioned relatively in desktop view?
Note: We are behind a hefty firewall so I do not have a link to view the site. If it is definitely need then I can take some time to move the pages to another server for viewing.
Thanks!
Just to clarify the original post/question and provide a few more details.
We have two NAV blocks on our site. One on top and one about mid page. In the original code the nav containers are placed within other div containers to control their positioning within the layout.
mmenu seems to grab both nav containers from their original location and do a prepend to the body during mmenu js execution. This changes the positioning within the original code to make mmenu work.
The change in location obviously causes the layout not load properly when viewed in desktop view, since the menu that used to be in a div container towards the middle of the page now renders on top of the page, due to it's mmenu modified location.
Is there a way to initialize mmenu only on screen resize of less than 800px or a way to unload it when in desktop view and put the nav containers back in their original position?
I tried various methods of handling the relocation of the nav with marginal success.
Tried the following:
Added some script to check the browser window resize and wrapped the mmenu code with an if to run it only when the browser window is 800px or less. This works marginally, since once the mmenu js is executed, the nav locations get changed and even if the browser is resized to above 800px, the nav containers still remain in the incorrect location.
I tried the above with the addition of some code to grab the nav container that should go in the middle of the page and re-write it into a div container on resolutions above 800px, but this works from mobile to desktop view. Going from desktop to mobile does not seem to fire mmenu, since I do believe that most of it's changes are done on page load, so resizing, does not fire the script again to make the nav container changes as needed by mmenu.
If I reduce the browser window to mobile size and refresh the page, then mmenu load fine.
What we are trying to achieve is pretty much the same behavior as media queries, so that we can control the execution of mmenu as needed in different resolution.
modernizr, enqueue, yepnope have been tried, but all seem to only fire the script once, not as the screen size is changed and obviously do not address the nav containers location changes.
Sample code to show what is happening:
Original site structure (shortened to show relevant items only):
<body>
<div id="wrapper">
<div id="header">
<div id="topnav">
<nav id="mainnav"></nav>
</div>
</div>
<div id="other"></div>
<div id="secondnav">
<nav id="midnav"></nav>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
MMENU Modified structure (after mmenu.js execution):
<body>
<nav id="midnav"></nav>
<nav id="mainnav"></nav>
<div id="wrapper">
<div id="header">
<div id="topnav">
</div>
</div>
<div id="other"></div>
<div id="secondnav">
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
Hopefully the above can clarify a bit more the issue we are experiencing.
The ultimate goal is the use mmenu and it's functionality/styling only in mobile and use our own CSS menu with sub-menus in desktop retaining the proper positioning as shown in the sample structure above.
Thanks in advance for any help with this, since we are pretty much stuck.
