---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day19 - Navbar 隨著斷點變換樣式、排版

運用此 [Codepen](https://codepen.io/hexschool/pen/KKGyGEv?editors=1100) 模板，嘗試練習將 Navbar 選單在 768px 以下時調整成以下畫面：
（只需調整 CSS 區塊 `...` 的部分）

原樣式：


768px 以下：


> 詳細相關文字、留白間距設定可以參考 AI 工具王設計稿

### 進階題
嘗試運用 jQuery，當 768px 以下時，點擊漢堡選單按鈕，使選單可以展開、收合：

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/hexschool/pen/gOBXQvW

進階題：
https://codepen.io/hexschool/pen/abRWgQL

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215| [Codepen](https://codepen.io/winter_/pen/OJBrGvE)|
| 2 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/yLRGrZL) |
| 3 | Daisy_Li#4231| [Codepen](https://codepen.io/lidairong-gmail-com/pen/BaqvEVO?editors=1100)|
| 4 | Ann Chou#0146| [Codepen](https://codepen.io/annchou_illu/pen/gOBZyZj)|
| 5 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/bGmOyBX)|
| 6 | 史滴芬#4310 | [Codepen](https://codepen.io/steven870107/pen/YzJdMBY)|
| 7 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/PoyXvGL)|
| 8 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/MWPZdpj)|
| 9 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/yLRGWVO)|
| 10 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/yLRGWWX)|
| 11 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/gOBZNvw)|
| 12 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/NWOeZgj)|
| 13 | Tina02#2691 | [codepen](https://codepen.io/Tina02/pen/YzJdooW) |
| 14 | Jacky7035#9423 | [codepen](https://codepen.io/adens123/pen/poxqXaL) |
| 15 | moins13#3346 | [codepen](https://codepen.io/kyechen13/pen/LYgMwpG) |
|16|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/jOeXgMe)|
| 17 | ChaosTu#9311 | [codepen](https://codepen.io/torotu/pen/ExdGqwV?editors=1100) |
| 18 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/dygwBgo) |
| 19 | Uli#1946 | [codepen](https://codepen.io/uli1313/pen/bGmOXqK) |
| 20 | 依依#6305 | [codepen](https://codepen.io/Rita-Yang/pen/MWPLgRo?editors=0110) |
| 21 | 銀光菇#1692 | [codepen](https://codepen.io/genesynthesis/pen/VwEqOxV)|
| 22 | Berlin#7338 | [codepen](https://codepen.io/3qberlin/pen/LYgqYmw?editors=1100)|
| 23 | Hao#2485 | [codepen](https://codepen.io/Seanfeb16/pen/YzJBzQz)|
| 24 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/QWZYWaq) |
| 25 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/ExdraNx) |
| 26 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/NWOoPdB) |
| 27 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/OJBdPow) |
| 28 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/JjmxYGe) |
| 29 | wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/QWZYyOJ?editors=1100)
| 30 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/mdzvVpq)|
|31|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/ExdrKRb)|
|32|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/rNqPLaJ)|
|33|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/JjmxRjj)|
|34|浪裡小白龍#6860|[Codepen](https://codepen.io/Emillo/pen/ExdrKzE)|
|35|N0c7iluc3n7#4390|[Codepen](https://codepen.io/huang-yu-cheng/pen/zYmeKav)|
|36|Yuu#5361|[Codepen](https://codepen.io/alycehwy/pen/RwevGOQ)|
|37|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/ZEqwBzb)|
|38|Tim123#8361|[Codepen](https://codepen.io/Wangtim4/pen/WNaPoLr)|
|39| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/abRXOaq?editors=1100) |
|40| Rayo#8002 | [CodePen](https://codepen.io/loborayo/pen/YzJBpJd) |
|41| 姜承#8204 | [CodePen](https://codepen.io/Troy0718/pen/YzJBNYz) |
|42| alll6z#9204 | [CodePen](https://codepen.io/A6Z/pen/jOedBbp) |
|43| 翔.#0859 | [CodePen](https://codepen.io/energy95272z/pen/JjmxWEY) |
|44|HsienLu#8316|[CodePen](https://codepen.io/Hsienlu/pen/eYPxyYb)|
|45|Eero#1147|[CodePen](https://codepen.io/Eero-Chiao/pen/dygadzm)|
|46|鉦勝#8333|[CodePen](https://codepen.io/atckmax823/pen/bGmzvLg)|
|46|CuraLin#2648|[CodePen](https://codepen.io/curalin/pen/XWxOqjw)|
|47|Aritan#1931|[CodePen](https://codepen.io/Aritan/pen/vYVbaeB)|
|48|Ting.66|[CodePen](https://codepen.io/Ting66/pen/ZEqwjrx?editors=1100)|
|49|MitA#7407|[CodePen](https://codepen.io/qaz15996398/pen/YzJBjJP)|
|50|Jennifer Chuang#3937|[CodePen](https://codepen.io/yujhen/pen/LYgqNLQ)|
|51| David0799#4415 |[CodePen](https://codepen.io/David0799/pen/oNamOOZ?editors=1100)|
|52|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/XWxOwGa)|
|53|satarkuo#5736|[CodePen](https://codepen.io/SatarKuo/pen/YzJgyQb)|
|54|yoyo#1003|[CodePen](https://codepen.io/pen/rNqRxjR)|
|55|YHT#1696|[CodePen](https://codepen.io/YHT31/pen/QWZoMja)|
|56|K（アギルダー）#0386|[CodePen](https://codepen.io/klay376014/pen/poxYQwR)|
|57| Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/KKGErVM) |
|58| 長方形#9612 | [Codepen](https://codepen.io/imjjw/pen/OJBqrBO) |
|59| penny#6214 | [Codepen](https://codepen.io/penny8989/pen/yLRwrBv) |
|60| Sonia Wu#7154 | [Codepen](https://codepen.io/YUJOU/pen/xxyeGLR) |
|61| jimhop#6510 | [Codepen](https://codepen.io/jimsansssss/pen/poxYMWK)
|62| Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/XWxQBYz)
|63| SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/jOeRdmX)
|64|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/gOByQJO?editors=1111)
|65|JasonChang#7847|[Codepen](https://codepen.io/jsonChangJava/pen/PoygvJR)
|66|雲漢#5319|[codepen](https://codepen.io/keon981/pen/bGmJyjQ?editors=1100)
|67|鄭舜仁#6606|[codepen](https://codepen.io/randomno/pen/zYmbevG)|
|68|townyuan#2653|[codepen](https://codepen.io/townyuan/pen/jOeoELG)|
| 69 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/vYVwLXB) |
| 70 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/qBJGZwm) |
| 71 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/bGmywaq) |
| 72 | weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/Jjmzdzp) |
| 73 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/xxyNLvv) |
| 74 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/KKGjwNW) |
| 75 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/poxXjvX) |
| 76 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/eYPwpbg) |
| 77 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/eYPwLGe) |
| 78 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/oNarKwa) |
| 79 | andrew0404#4576 | [Codepen](https://codepen.io/Loonng/pen/JjmgOdG) |
| 80 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/QWZeZKg) |
| 81 | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/RwqbKqx) |
| 82 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/jOeXoLb) |
|83|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/yLQBoGg)|
|84|liam9930#4129|[Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/oNQNjxX)|
|85|初心#9021|[Codepen](https://codepen.io/Sylviax/pen/GRwJgQQ?editors=1100)|
|86|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/KKrwBoo)|
|87|路人ADCB#9851|[Codepen](https://codepen.io/markyourpage/pen/NWEGaVW)|
|88|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/GRwogEN)|
| 89 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/RwqRBzq)|
| 90 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/bGQWxEa)|
| 91 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/poQLPOd?editors=1100)|
| 92 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/dyQqOWR?editors=0100)|