Edit Mobify website menu

Question

I used the service Mobify (www.mobify.com) to create a mobile version of my site. I have done everything I wish to do, except edit my menu. I would like to remove a few items from the menu and/or add submenu items. If someone has any familiarity with Mobify I would really appreciate the help.

Edit

<nav id="x-navigation">
    <div>
        <ul>
        {! We decend into the header object, and use {.}  to iterate through each element in navigation !}  
        {#header}
            {#navigation}
                <li>{.}</li>
            {/navigation}
        {/header}
        </ul>
   </div>
</nav>

Answer 1

When you extract your menu, I'm guessing you're doing something like this:

menu: function() {
    return $('.menu');
}

But you can actually have more advanced selectors! For example, if your menu looked like this:

<ul class="menu">
    <li class="home"><a href="/">Home</a></li>
    <li class="about"><a href="/about/">About</a></li>
    <li class="contact"><a href="/contact/">Contact</a></li>
</ul>

And if you only wanted the first two anchors, you could do something like this:

menu: function() {
    return $('.menu a').splice(0,2);   
}

Or if you only wanted "Home" and "Contact" anchors:

menu: function() {
    var $menu = $('.menu');
    $menu.find(".about").remove();
    return $menu.find('a')
}

Those are just a couple of examples of what you can do. In reality you can do anything that Javascript and Zepto allow!