Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] navigation menus in mobile, best practice

Home Forums Support navigation menus in mobile, best practice

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #51548
    Dee Broughton

    Tom –

    I’m working on a design for a client, sandbox for it at http://goodwriting.guru/, and she hates the way there are two menus hotdogs on the mobile view since we have a secondary nav.

    I can make everything on one menu of course, but is that the best solution?

    If I only have 4 menu items or so, can’t I just keep it from making that little hotdog thing anyway?

    Do you have any other tips for how to make this design more palatable both on big and small screens? I’m new to designing for mobile/responsive and sorta hate it. πŸ˜›

    #51764
    Tom
    Lead Developer
    Lead Developer

    Hi Dee,

    One thing I’ve experienced with is in use when the navigation is in the sidebar.

    When it’s down to mobile size, the script will move the menu below the header.

    I’m not sure if this is the best way to handle it, but it seems to be working fine in that use.

    Let me know if you’re interested in the code, and if so, which nav is going where?

    #51784
    Dee Broughton

    I managed to moved it ok, but now I want to get rid of the word “Menu” and just leave the hotdog. I can’t find the word. Where/How an I remove it?

    #51845
    Dee Broughton

    So, I’d still like to know where I can remove the word “MENU.” I can’t find it. But I’m wondering if it would work to turn the menu “button” on it’s side the way the Gifts button is on the right. Could I leave the hotdog oriented correctly, but turn the word 90 degrees clockwise? How? Would users like or hate that, do you think? Ugh, mobiles.

    #51903
    Tom
    Lead Developer
    Lead Developer

    You can remove “Menu” with a filter:

    add_filter('generate_mobile_menu_label','generate_remove_menu_label');
    function generate_remove_menu_label()
    {
          return '';
    }

    Not too sure what you mean by your second post – any examples?

    Thanks!

    #51910
    Dee Broughton

    Oooooooo, filters! A whole new world! πŸ™‚ Exciting, but I don’t know how to use this. Is there no simple CSS way to just hide the word? If not, where do I put this filter?

    Never mind about the other.

    Thank you.

    #51914
    Tom
    Lead Developer
    Lead Developer

    Unfortunatley there’s no CSS to hide the word – but the filter can be added quite easily using this plugin: https://wordpress.org/plugins/code-snippets/

    #51920
    Dee Broughton

    Hmmmmm, when I add that to code snippets, it breaks the site displaying an unending column of full width colored bars that are, I think, the menu background.

    I just want a hotdog symbol without the word “menu”. Sigh.

    #51950
    Tom
    Lead Developer
    Lead Developer

    Hmm, I tested that code and it worked perfectly for me.

    Try this instead:

    Install this plugin: https://wordpress.org/plugins/pluginception/

    Once installed and activated, go to “Plugins > Create new plugin”.

    Name the plugin whatever you like – it will be your own plugin for custom functions.

    Once created, it should take you to an editor – at the bottom of the file, paste the code provided above.

    Save your plugin, and it should work perfectly.

    #52233
    Dee Broughton

    Something must be wrong with the filter code, Tom. At least in combination with the CSS I’m using.
    This is what it does with both pluginception and snippets http://goodwriting.guru/

    #52237
    Dee Broughton

    I finally found the issue.

    There’s a line in navigation.php that reads

    <h3 class="menu-toggle"><?php _e( 'Menu', 'generate' ); ?></h3>

    I know that just about the worst practice in the world would be to edit that file and remove that Menu, but that’s what I need to do. How do I do that properly?

    #52273
    Tom
    Lead Developer
    Lead Developer

    Ah! This is totally my fault – the filter I was trying to tap into for you is in the latest version that hasn’t been released yet.

    If you’d like, email me at support@generatepress.com with temp admin login details, and I’ll set it up for you first thing in the morning.

    Sorry!

    #52438
    Pete

    Unfortunatley there’s no CSS to hide the word
    Any chance in adding a css class for us Tom? πŸ™‚

    #52490
    Dee Broughton

    Tom,

    Well, thank goodness, I could not figure out how the heck a filter worked on a function that didn’t seem to exist. I was totally prepared to believe in the Tom magic, but… πŸ™‚

    It’s ok, I’ve removed the word in navigation.php to make the client happy and, when the new version comes out, I’ll come back here and get the filter to fix it properly. That’s right, isn’t it? That will work?

    A new addon for toggling mobile features would be an awesome addition to GeneratePress.

    #52664
    Tom
    Lead Developer
    Lead Developer

    @Pete – added πŸ˜‰


    @Dee
    – that will work, then once the new version is out, you’ll be able to use CSS to hide it.

    .menu-toggle .mobile-menu {
          display: none;
    }

    You can add that now, and it will hide it as soon as you update.

    The filter is still awesome, but mainly if you want to change the wording to something else.

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.