Make footer menu consistent with header menus

[rgilman]

I suggest that the footer menu get move out of the WP database and into the BFCom code, as we did with the top menu. I also suggest that we apply styling similar to the header menu, although with unique selectors. This would include centering it.

@DavidScottBernstein, is this something you could take on?

[iangilman]

I assume we want it to be a little less conspicuous than the header menu, though, right?

[rgilman]

Sure. It could be smaller type or minimized in other ways.

[DavidScottBernstein]

Yes, I’m up for doing this. Do want it implemented similarly to how I did the top menu? What options do you want it to have (like icons, custom selectors, etc.) or should I just make it static for now?

[rgilman]

No need for icons but some custom selectors, at least for the group as a whole. I expect we may want to use the CSS calc function to gradually shrink the type size and padding for smaller screens. We could also combine "Terms" and "Privacy" into one link for "Policies". The challenge may be to keep it on one line on the smallest screens.

If I were doing it, I'd start with the php work for desktop, get the desktop CSS working and then dive into responsive CSS. Note that we seem to be settling into media queries of max-width: 767px and max-width: 374px. Using calc within these allows for a smooth transition across a wide range.

Font size is currently 16px. In keeping with Ian's comment, we might want to move that down to 14px on desktop and then bring it gradually down to 12px for a 300px viewport width. The padding is currently huge, effectively 32px between words. That works fine for desktop but also give us a lot of room to shrink. We just don't want to go so small that touch screens can't tell what's being aimed at.

[iangilman]

One CSS tool for responsive stuff is the vw units, which are based on the viewport width (i.e. the window). 100vw is the width of the window; 50vw is half the width, etc. If you specify font size in terms of vw you can get smooth scaling as the window gets smaller. Of course be careful at the small end of the range; media breakpoints might still be useful.

Also be aware that calc doesn't always work when mixing unit types, or at least I've had trouble doing so sometimes. I think maybe it works sometimes, but you'll have to experiment.

[rgilman]

There is an example of using calc that mixes vw and px units starting at line 727 in assets > styles > style.css. It has worked so far in my testing. I was thinking we could do something similar for the footer.

[iangilman]

Yeah, I think it's more that there are certain exceptions where calc doesn't work when mixing units. I forget where I ran across that though.

[DavidScottBernstein]

I created a footer menu template method to display the footer menu, similar to the one for the header menu. I retained the old class names, like menu-item-106, and changed the menu IDs to something more meaningful, like menu-item-about. Let me know if you'd like me to remove the old class names or make any other changes. I also adjust the font size in the 320px media query so it scales smoothly.

This version does not highlight the active footer menu item because the "active" class is being used for something else in the top menu that causes the active footer menu item to disappear when the viewport is made narrow.

Uncomment the assignment of the active class on line 315 of bfc_functions.php in my new pull request and then make the window narrow to see the active menu item disappear.

I think the correct way to fix this would be to split the .menu class into .top-menu and .bottom-menu with just the attributes needed for each. That seems like a complex and error-prone task. Can I have help with this or suggestions for approaching it?

Also, there seem to be tabs on otherwise empty lines that my editor has removed from style.css. Is that correct or do I still have an editor config issue?

[iangilman]

Thank you for updating the menu IDs to make them more meaningful!

I agree with @rgilman that we don't need active highlighting for footer items; I think most sites don't highlight footer items.

Looks like your editor config is working properly; removing trailing white space is one of the things it's supposed to do. I realize it adds a little noise to the pull request, but it's cleaner in the long run.

Happy 2019! :-)

[DavidScottBernstein]

@rgilman @iangilman Putting the copyright notice on the same line as the footer menu turned out to be a bit challenging. I finally put it at the bottom of bfc_bottom_nav() on line 326-328 of bfc-functions.pho in my last pull request. I also had to remove the inner-footer class in footer.php so the menu would center.

Notice in bfc_functions.php, lines 326-329 I hardcoded "BFNet." since bloginfo('name') didn't seem to work and used <p></p> to generate a newline because the call to wp_footer() on line 16 of footer.php displays a status bar at the bottom of the window called Query Monitor that hides the bottom line of the page. Is this something we can remove?

Also, test out the responsive font resizing and let me know what you think. Feel free to adjust the styles to your liking.

I'll be teaching for a client and then at a conference next week and the week after. I'm home again the week of 2/11.

[rgilman]

@DavidScottBernstein, good to see this progress. I'm about to head into a four-day conference at Whidbey Institute and plan on getting back into BFCom when I get back. Should have more stuff for you to work on once you're home on the 11th.

[rgilman]

Also, Query Monitor is a debugging plugin that won't be part of the production site. You can deactivate it in your local dev if you aren't using it by going to Admin Dashboard > Plugins > Query Monitor.

[DavidScottBernstein]

@rgilman Great, thank you and enjoy the conference.

[iangilman]

@DavidScottBernstein Happy travels!

[rgilman]

Here are some notes on the changes I made building on @DavidScottBernstein's good start:

• I moved the copyright notice to the front (left) of the line as seems to be the general convention
• I replaced the hard coded BFNet with get_bloginfo('name'). There is a convention in the WP world that template_tag() = echo get_template_tag(). If you need to output a variable, use get_template_tag(). If you are going right to something that will be displayed, use template_tag().
• I tweaked the responsive font sizing and added responsive padding plus a few other styling tweaks.

Thanks again, @DavidScottBernstein, for all the work you put into this. I'm happy with what we've accomplished so will close this issue.