Front-End Exercise 3

Practice describing responsive bugs clearly in English.

Exercise #3 · Responsive Nav — Hamburger Doesn’t Open

Front-end · Responsive · Speaking

Assignment & Scenario: You’re testing the site on a mobile viewport. Product expects a hamburger button that toggles the navigation. On small screens, the menu should be hidden by default and expanded when the hamburger is pressed. Your job is to reproduce the issue, think aloud, and report it as if speaking to a developer.

Try it at different widths. On small screens the hamburger should appear and open the menu — but it doesn’t.

<!-- Minimal buggy snippet you can reuse -->
<nav class="nav">
  <button class="hamburger" id="navToggle" aria-expanded="false" aria-controls="siteMenu">☰</button>
  <ul class="menu" id="siteMenu">...</ul>
</nav>

<style>
/* BUG: breakpoint flips behavior */
@media (min-width: 480px){
  .menu{display:none;}
  .hamburger{display:inline-flex;}
}
</style>

<script>
// BUG: wrong ID in JS prevents toggling
document.getElementById('navToggl').addEventListener('click', function(){
  const menu = document.getElementById('siteMenu');
  const open = menu.classList.toggle('is-open');
  this.setAttribute('aria-expanded', String(open));
});
</script>

🎤 Speaking Instructions (in-class) how to perform

Title: “Hamburger button doesn’t open the nav on mobile.”
Environment: “Chrome DevTools, iPhone 12 emulation, width ≈ 390px.”
Steps to reproduce:
1. Open the page and set the viewport < 480px.
2. Tap the hamburger button.
3. Observe whether the menu appears and whether focus can move into links.
Expected vs. Actual:
- Expected: Menu is hidden by default; tapping the hamburger toggles it open/closed and updates aria-expanded.
- Actual: Hamburger may not show or tapping does nothing; menu doesn’t open; aria-expanded stays false.
Impact/Severity: “High — navigation is not available on small screens; blocks discovery and conversions.”
Recommendation: “Flip the breakpoint to @media (max-width: 480px); fix the button ID in JS; ensure aria-expanded updates when toggling.”
Hand-off: “I’ll attach a short recording and open a Jira ticket with screenshots at 390px and 1024px.”

📖 Vocabulary definitions

breakpoint — a screen width where layout rules change.
hamburger (menu) — a button that toggles navigation on small screens.
toggle — switch between two states (open/closed).
ARIA — attributes that improve accessibility semantics (e.g., aria-expanded).
focus management — controlling where keyboard focus moves.
selector — a string used to find elements in CSS/JS.
media query — CSS rule that applies under certain screen conditions.

🧩 Collocations natural pairings

set a breakpoint
toggle the menu
update aria-expanded
attach an event listener
flip the media query
verify responsive behavior
test on multiple devices

🗣️ Idioms & Phrasal Verbs natural speech

zero in on — focus closely on a cause.
fall back to — use a backup approach.
iron out — resolve small problems.
point out — highlight an issue.
rule out — eliminate a possible cause.

🧪 Model Answer (spoken style) example

“Title: Hamburger button doesn’t open the nav on mobile. Environment: Chrome DevTools iPhone 12, width around 390px. Steps: open the page, shrink the viewport below 480px, tap the hamburger. Expected: the menu is hidden by default and tapping toggles it open, with aria-expanded updating to ‘true’. Actual: the hamburger either doesn’t appear or tapping it does nothing; the nav doesn’t open and aria-expanded stays ‘false’. Impact: high — users can’t access navigation on small screens. Likely causes: the media query uses min-width instead of max-width, so the hide/show logic is inverted; also the JavaScript targets the wrong button ID, so the listener never attaches. Recommendation: switch to @media (max-width: 480px), fix the ID in JS to ‘navToggle’, and verify aria-expanded updates when toggling. I’ll attach a short recording and file a ticket.”