[Resolved] navigation menus in mobile, best practice

[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. 😛

[Tom]

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?

[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?

[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.

[Tom]

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!

[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.

[Tom]

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/

[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.

[Tom]

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.

[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/

[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?

[Tom]

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!

[Pete]

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

[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.

[Tom]

@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.

[Author]

Posts