├── index.html └── main.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Navbar 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 | 29 | 30 |
31 |

Welcome, Human

32 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, explicabo!

33 |
34 |
35 | 36 | 45 | 46 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | .app { 9 | display: flex; 10 | min-height: 100vh; 11 | } 12 | 13 | .menu-toggle { 14 | display: none; 15 | position: fixed; 16 | top: 2rem; 17 | right: 2rem; 18 | width: 60px; 19 | height: 60px; 20 | border-radius: 99px; 21 | background-color: #2e3047; 22 | cursor: pointer; 23 | } 24 | 25 | .hamburger { 26 | position: relative; 27 | top: calc(50% - 2px); 28 | left: 50%; 29 | transform: translate(-50%, -50%); 30 | width: 32px; 31 | } 32 | 33 | .hamburger > span, 34 | .hamburger > span::before, 35 | .hamburger > span::after { 36 | display: block; 37 | position: absolute; 38 | width: 100%; 39 | height: 4px; 40 | border-radius: 99px; 41 | background-color: #FFF; 42 | transition-duration: .25s; 43 | } 44 | 45 | .hamburger > span::before { 46 | content: ''; 47 | top: -8px; 48 | } 49 | .hamburger > span::after { 50 | content: ''; 51 | top: 8px; 52 | } 53 | .menu-toggle.is-active .hamburger > span { 54 | transform: rotate(45deg); 55 | } 56 | .menu-toggle.is-active .hamburger > span::before { 57 | top: 0; 58 | transform: rotate(0deg); 59 | } 60 | .menu-toggle.is-active .hamburger > span::after { 61 | top: 0; 62 | transform: rotate(90deg); 63 | } 64 | 65 | .sidebar { 66 | flex: 1 1 0; 67 | max-width: 300px; 68 | padding: 2rem 1rem; 69 | background-color: #2e3047; 70 | } 71 | 72 | .sidebar h3 { 73 | color: #707793; 74 | font-size: 0.75rem; 75 | text-transform: uppercase; 76 | margin-bottom: 0.5em; 77 | } 78 | 79 | .sidebar .menu { 80 | margin: 0 -1rem; 81 | } 82 | 83 | .sidebar .menu .menu-item { 84 | display: block; 85 | padding: 1em; 86 | color: #FFF; 87 | text-decoration: none; 88 | transition: 0.2s linear; 89 | } 90 | 91 | .sidebar .menu .menu-item:hover, 92 | .sidebar .menu .menu-item.is-active { 93 | color: #3bba9c; 94 | border-right: 5px solid #3bba9c; 95 | } 96 | 97 | .sidebar .menu .menu-item:hover { 98 | border-right: 5px solid #3bba9c; 99 | } 100 | 101 | .content { 102 | flex: 1 1 0; 103 | padding: 2rem; 104 | } 105 | 106 | .content h1 { 107 | color: #3C3F58; 108 | font-size: 2.5rem; 109 | margin-bottom: 1rem; 110 | } 111 | 112 | .content p { 113 | color: #707793; 114 | } 115 | 116 | @media (max-width: 1024px) { 117 | .sidebar { 118 | max-width: 200px; 119 | } 120 | } 121 | 122 | @media (max-width: 768px) { 123 | .menu-toggle { 124 | display: block; 125 | } 126 | .content { 127 | padding-top: 8rem; 128 | } 129 | .sidebar { 130 | position: fixed; 131 | top: 0; 132 | left: -300px; 133 | height: 100vh; 134 | width: 100%; 135 | max-width: 300px; 136 | transition: 0.2s linear; 137 | } 138 | 139 | .sidebar.is-active { 140 | left: 0; 141 | } 142 | } --------------------------------------------------------------------------------