Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
development:css:bootstrap:animated_hamburger_menu [2020/03/17 13:22] kalenpw |
development:css:bootstrap:animated_hamburger_menu [2020/03/17 13:31] (current) kalenpw |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Animated Hamburger Menu Toggle ====== | ====== Animated Hamburger Menu Toggle ====== | ||
| + | Animation to have the 3 line hamburger menu turn into an x | ||
| + | ---- | ||
| + | ===== HTML ===== | ||
| + | Replace the normal bootstrap hamburger menu in the navbar with the following | ||
| <code html> | <code html> | ||
| <button class=" | <button class=" | ||
| Line 13: | Line 17: | ||
| </ | </ | ||
| + | ---- | ||
| + | ===== CSS ===== | ||
| + | And add the following CSS | ||
| <code css> | <code css> | ||
| .navbar-toggler { | .navbar-toggler { | ||
| Line 50: | Line 57: | ||
| } | } | ||
| </ | </ | ||
| + | |||
| + | ---- | ||
| + | ===== Example ===== | ||
| + | {{: | ||