mmenu problems with content

Question

I'm currently developing a briefcase-site for my work. I'm using the javascript-plugin "mmenu" created by Fred from frebsite.nl.

Here's the thing. When I'm trying to begin to add my content, the content itself always appears at the top of the web. I've been trying all sorts of tricks like position: relative and absolute on different objects, but nothing seems to work.

Here's how the html-structure looks:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Eric Peterssons Portfolio</title>
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1 user-scalable=no">

    <!-- FAVICON -->
    <link href="img/favicon.ico" rel='shortcut icon' type='image/x-icon' /> 

    <!-- GOOGLEAPIS -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- CSS FILES -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link type="text/css" rel="stylesheet" media="all" href="css/mmenu.css" />
    <link type="text/css" rel="stylesheet" media="all" href="css/mmenu-positioning.css" />

    <!-- JS FILES -->
    <script type="text/javascript" language="javascript" src="js/jquery.mmenu.js"></script>

    <script type="text/javascript">
       $(function() {
        $('#mmenu').mmenu({
            zposition: "front",
        });
      });
      </script>

</head>

<body>
 <!-- NAVIGATION -->
    <div id="header">
        <div id="innerHeader">
            <div id="circleHead">
                <div id="frame">
                    <a href="index.html">
                        <img src="img/head.jpg" />
                    </a>
                </div>
            </div>
            <div id="logotypeHolder">
                <a href="index.html">
                    <img src="img/logotype-col.png" />
                </a>
            </div>
                <nav id="websiteMenu">
                    <ul>
                        <li class="Selected">
                            <a class="active" href="index.html">Hem</a>
                        </li>
                        <li>
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                            <a href="om.html">Om</a>
                        </li>
                        <li>
                            <a href="kontakt.html">Kontakt</a>
                        </li>
                    </ul>
                </nav>
                <nav id="mmenu">    
                    <ul>
                        <li class="title">
                            Meny
                        </li>
                        <li class="Selected">
                            <a class="active" href="index.html">Hem</a>
                        </li>
                        <li>
                            <a href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                            <a href="om.html">Om</a>
                        </li>
                        <li>
                            <a href="kontakt.html">Kontakt</a>
                        </li>
                    </ul>
                </nav>
            <div id="menuHolder">  
                <a class="button" href="#mmenu">
                    <img src="img/menu.png" />
                </a>
            </div>
        </div>
    </div>
    <!-- VIDEO -->
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
            <source src="video/wave.mp4" type="video/mp4">
            <source src="video/wave.webm" type="video/webm">
    </video>
    <div id="wrapper">
        wdqwfwe
    </div>
</body>

After some Google Chrome-inspection I saw that the HTML-structure was change into this instead:

https://i.stack.imgur.com/t3NMu.png

As you can see the div class="mm-page" begins directly after the nav and before the header, even though I've didn't structure it like that.

So now to my question - Why does it behave like this, and is there a way to make the mm-page content display as I'd like to, i.e. after the video?

Thanks!

Eric

I'll try it (never used it before). Here's my site at the moment if someone would like to inspect it from there - http://ericceric.se/portfolio/ — user2359873, Oct 29 '13 at 17:56

Fred · Answer 1 · 2014-10-23T08:25:04.727

3

The mmenu plugin needs all "content" to be in one DIV. By default it selects "body > div" as the page-DIV. If this finds multiple elements, the plugin will wrap all elements in a new DIV.

In your case, you don't want the plugin to use "body > div" to select the page, you need "#wrapper". Tell this to the plugin by using the configuration object, like this:

$('#menu').mmenu({
    // the options
}, {
    // the configuration
    pageSelector: "#wrapper"
});

Documentation: http://mmenu.frebsite.nl/documentation/options/

Tutorial: http://mmenu.frebsite.nl/tutorial/

edited Oct 23 '14 at 08:25

answered Oct 31 '13 at 15:12

Fred

512
3
6

Thank you so much, Fred! And I thought I had been taking a deep look in the options documentation. This clearly turns things around! – user2359873 Nov 02 '13 at 09:09

score 0 · Answer 2 · answered Jul 16 '16 at 22:01

0

Your header is outside your wrapper which causes the problem.

In addition to that this bug may be cause by setting margin-top > 0 for any of the child divs.

answered Jul 16 '16 at 22:01

Ivan Venediktov

158
10

mmenu problems with content

2 Answers2