Best approach to a mobile nav

Permalink 1 user found helpful
Hello everyone,

I have to say, I was impressed by the ease of working with C5, and then with all the responses I received to my first forum post. Thanks for all the help.

I did run into another issue with my responsive theme, I could use a little help with. I'm trying to implement a low profile mobile header. To do this i've chosen to hide the mobile menu all together then reveal it when a menu icon is clicked. Because the menu is hidden I can't see it in edit mode. I don't want to hard-code the menu as my client may want to change it. I have tried using the "editmode" class to reveal it, but with no success.

I tried searching the forums but couldn't find anything. Has anyone tackled a hidden mobile nav? If so, what did you do to overcome this?

View Replies:
adajad replied on at Permalink Reply
adajad
could you supply some code so we knows what is happening?
BryanSalva replied on at Permalink Reply
Sure thanks for your reply. I've included the HTML. Basically the div.help and div#mobile-list-menu are revealed when someone clicks on them. The problem seems to be that they are hidden in their initial state therefor I cannot edit them in C5.

<div id="mobile-reveal-container">
    <!--set widths and heights and overflow:hidden for these two divs -->
      <div id="mobile-search-field" class="mobile-reveal search">
          <ul>
            <a href="#">
              <li>
                <div class="help">
                  <form>
                    <input type="text" class="help-field" />
                    <input type="submit" class="help-button" />
                  </form>
                </div>
              </li>
            </a>
          </ul>
adajad replied on at Permalink Reply
adajad
I can't see what classes hides/shows on click, but a suggestion could be to not apply the classes that hides them if you are in edit mode (assuming class.mobile-reveal is the trigger):

<?php $c= Page::getCurrentPage(); ?>
<div id="mobile-reveal-container">
    <!--set widths and heights and overflow:hidden for these two divs -->
      <div id="mobile-search-field" class="<?php if !$c->isEditMode() { echo('mobile-reveal');}; ?> search">
          <ul>
            <a href="#">
              <li>
                <div class="help">
                  <form>
                    <input type="text" class="help-field" />
                    <input type="submit" class="help-button" />
                  </form>
                </div>
              </li>
            </a>


A hasty response, but let me know!
BryanSalva replied on at Permalink Reply
I've tried something similar using the "editmode" class on the body. It doesn't seem to work.
jordanlev replied on at Permalink Reply
jordanlev
I'm not sure what the "editmode" class is, but notice that @adajad is actually using a different technique -- he's got a small snippet of PHP code that you can use to output different markup for edit mode vs. normal site viewers.
But note that there's a typo there -- there should be parentheses around the "if" condition, like so:
<?php if ($c->isEditMode()) { echo 'whatever-class-you-want'; } ?>


Best,
Jordan
adajad replied on at Permalink Reply
adajad
Jordan is completely right (thanks for pointing it out, I found another typo as well) and I blame me typing this on my phone.

Anyways, try it out with the parentheses on the right place and note the exclamation mark which basically gives the snippet the meaning (assuming class mobile-reveal hides the menu);

'if the page IS NOT in edit mode output the class that hides the menu'.

<?php if (!$c->isEditMode()) { echo 'mobile-reveal';} ?>
Cahueya replied on at Permalink Reply
I am SO incredibly happy to have guys like you in the community! @jordanlev & adajad