Mobile nav

[siakaramalegos]

Connects #17

• Adds hamburger menu
• Makes logo responsive
• Adds active class for active page and section
• Adds hover design
• Adds smooth scroll and section detection on index.html using 2 small vanilla js packages

TODO:

• Maybe I should animate the mobile menu appearing? Like dropping down from above?

[glynnis]

Weird thing I'm seeing in my browser (Chrome Version 62.0.3202.75 Official Build 64-bit) at < 750px -- an extra scroll bar that I think is an artifact of the mobile nav.

Here's a screen shot:

[glynnis]

Hmm, and the scrollbar stays present (even when I don't need to scroll) when the menu is open on mobile too. Looks like there's some padding that's missing on the left side of the open mobile menu too.

[glynnis]

Hmm, also seeing some odd behavior in the mobile nav that I'm having trouble interpreting the cause of, since I don't really do JS.

When I'm at a mobile width (i.e. hamburger menu showing) and on the about or contact pages, if I click the "home" or "services" links, I'm taken to the homepage, but don't see the hero at all:

Stranger still: if I then click "services" from the homepage mobile menu, I'm taken to the contact page, but about and contact links from the homepage menu don't function as links.

Steps to reproduce missing hero:

1. Shrink your browser width below 750px.
2. Visit the contact page.
3. Click the hamburger menu.
4. Click "home" or "services".

Expected results: see hero at top of page, either on load (if you clicked "home") or when scrolling up (if you clicked "services"). Actual results: hero photo and content is missing on load, but reappears if you click the hamburger menu again.

Steps to reproduce broken links on homepage:

1. Follow "Steps to reproduce missing hero".
2. Click hamburger menu from homepage.
3. Click "services", "about", or "contact".

Expected results: When clicking "services", page scrolls to services section. When clicking "contact" or "about", respective pages load. Actual results: When clicking "services", contact page loads. "Contact" and "about" are not clickable and don't appear to be links.

This one is super weird! Feel free to copy this into a bug issue if needed, and/or let me know if you need to change the design/how this works.

[siakaramalegos]

@glynnis I just pushed up some changes. I don't experience any of these issues, so can you check with the new version and let me know which are/are not still happening?

[glynnis]

Looks like both the bugs I reported in https://github.com/siakaramalegos/clioandcalliope/pull/38#issuecomment-343362375 are resolved!

I think this is unrelated, but I am seeing some new weirdness on the homepage when I click the "services" link where the mobile menu closes when I click "services" and then opens again as it's scrolling (same browser specs as I reported last night):

[siakaramalegos]

@glynnis Thanks for the update - yeah that should be a quick fix in JavaScript. That's a bug because it's a same-page link so the menu won't automatically close. Thanks for testing all this out!

[glynnis]

In Chrome for mobile width, the space where the scrollbar was now just has a blank gap where the background is missing, and the links are still lacking some padding on the left side:

I don't know that it's the best solution, but adding margin-right: -15px; to .nav-links.show-links in the browser inspector fixed the issue for me.

[glynnis]

This is an edge case, so I can file a separate issue as a bug if you don't want to address in this PR, but if the mobile menu is open in the "services" section (or any part of the homepage when the user has scrolled down), but then they scroll up, they see two mobile menus briefly.

Steps to reproduce:

• On mobile size, scroll down to "services" section on homepage.
• Open hamburger menu.
• Scroll up to top of page.

[siakaramalegos]

Yes, if you scroll faster than the transition, it will show 2 things at once while the transition is still occurring. It is set at 0.2s. Do you have an idea of what you would want to change it to?

[glynnis]

I'll be making separate issues for addressing the scrollbar issue + any adjustments to the menu animation so this PR can be merged.