├── README.md ├── assets ├── css │ └── styles.css ├── img │ └── perfil.png ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _breakpoints.scss │ └── _header.scss │ ├── config │ └── _variables.scss │ ├── layout │ └── _layout.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # 📱 Create Responsive Navbar 2 | ## [Watch it on youtube](https://youtu.be/HV5JKDCr3tY) 3 | ### 📱 Create Responsive Navbar 4 | 5 | - Responsive Navbar Using HTML CSS & JavaScript 6 | - Beautiful panel with names and user image. 7 | - Smooth scrolling in each section. 8 | - Developed first with the Mobile First methodology, then for desktop. 9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 10 | 11 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode) 12 | 13 | ![preview img](/preview.png) 14 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | /*=============== VARIABLES CSS ===============*/ 4 | :root { 5 | --header-height: 3.5rem; 6 | /*========== Colors ==========*/ 7 | --first-color: hsl(273, 97%, 66%); 8 | --first-color-shape: hsl(253, 33%, 32%); 9 | --title-color: hsl(273, 8%, 15%); 10 | --text-color: hsl(273, 4%, 45%); 11 | --body-color: hsl(273, 100%, 99%); 12 | --container-color: #fff; 13 | --title-color-dark: hsl(273, 83%, 98%); 14 | --text-color-dark: hsl(273, 21%, 56%); 15 | --container-color-dark: hsl(273, 80%, 14%); 16 | /*========== Font and typography ==========*/ 17 | --body-font: 'Poppins', sans-serif; 18 | --big-font-size: 1.5rem; 19 | --normal-font-size: .938rem; 20 | --small-font-size: .813rem; 21 | /*========== z index ==========*/ 22 | --z-fixed: 100; 23 | } 24 | 25 | @media screen and (min-width: 968px) { 26 | :root { 27 | --big-font-size: 2rem; 28 | --normal-font-size: 1rem; 29 | --small-font-size: .875rem; 30 | } 31 | } 32 | 33 | /*=============== BASE ===============*/ 34 | * { 35 | box-sizing: border-box; 36 | padding: 0; 37 | margin: 0; 38 | } 39 | 40 | html { 41 | scroll-behavior: smooth; 42 | overflow-x: hidden; 43 | } 44 | 45 | body { 46 | font-family: var(--body-font); 47 | font-size: var(--normal-font-size); 48 | color: var(--text-color); 49 | overflow-x: hidden; 50 | } 51 | 52 | h1, h2, h3 { 53 | color: var(--title-color); 54 | } 55 | 56 | ul { 57 | list-style: none; 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | } 63 | 64 | img { 65 | max-width: 100%; 66 | height: auto; 67 | } 68 | 69 | /*=============== REUSABLE CSS CLASSES ===============*/ 70 | .container { 71 | max-width: 1024px; 72 | margin-left: 1.5rem; 73 | margin-right: 1.5rem; 74 | } 75 | 76 | .section { 77 | padding: 4.5rem 0 1rem; 78 | } 79 | 80 | .section__height { 81 | height: 100vh; 82 | } 83 | 84 | /*=============== HEADER Y NAV ===============*/ 85 | .nav { 86 | background-color: var(--container-color-dark); 87 | padding-top: 2rem; 88 | position: fixed; 89 | top: 0; 90 | left: 0; 91 | width: 100%; 92 | height: 100vh; 93 | } 94 | 95 | .nav__shape { 96 | width: 200px; 97 | height: 200px; 98 | background-color: var(--first-color-shape); 99 | border-radius: 50%; 100 | position: absolute; 101 | top: -2rem; 102 | left: -2rem; 103 | filter: blur(90px); 104 | } 105 | 106 | .nav__close { 107 | position: relative; 108 | display: inline-flex; 109 | font-size: 1.8rem; 110 | color: var(--text-color-dark); 111 | cursor: pointer; 112 | margin-bottom: 3.5rem; 113 | } 114 | 115 | .nav__img { 116 | width: 70px; 117 | } 118 | 119 | .nav__mask { 120 | width: 80px; 121 | height: 80px; 122 | background: linear-gradient(224deg, #a22fe9 -2%, #ddaafe 97%); 123 | border-radius: 1.5rem; 124 | overflow: hidden; 125 | display: flex; 126 | justify-content: center; 127 | align-items: flex-end; 128 | margin-bottom: 1rem; 129 | } 130 | 131 | .nav__data { 132 | position: relative; 133 | margin-bottom: 3rem; 134 | } 135 | 136 | .nav__greeting { 137 | display: block; 138 | color: var(--text-color-dark); 139 | font-size: var(--small-font-size); 140 | font-weight: 500; 141 | margin-bottom: .25rem; 142 | } 143 | 144 | .nav__name { 145 | color: var(--title-color-dark); 146 | font-size: var(--big-font-size); 147 | line-height: 130%; 148 | } 149 | 150 | .nav__list { 151 | display: flex; 152 | flex-direction: column; 153 | row-gap: 1.5rem; 154 | } 155 | 156 | .nav__link { 157 | color: var(--text-color-dark); 158 | display: inline-flex; 159 | align-items: center; 160 | column-gap: 1rem; 161 | font-size: var(--small-font-size); 162 | font-weight: 500; 163 | transition: .3s; 164 | } 165 | 166 | .nav__link i { 167 | font-size: 1.15rem; 168 | } 169 | 170 | .nav__link:hover { 171 | color: var(--title-color-dark); 172 | } 173 | 174 | .main { 175 | position: relative; 176 | background-color: var(--body-color); 177 | transition: .4s; 178 | } 179 | 180 | .header { 181 | width: 100%; 182 | background-color: var(--body-color); 183 | position: fixed; 184 | top: 0; 185 | left: 0; 186 | z-index: var(--z-fixed); 187 | } 188 | 189 | .header__nav { 190 | height: var(--header-height); 191 | display: flex; 192 | justify-content: space-between; 193 | align-items: center; 194 | } 195 | 196 | .header__logo, .header__toggle { 197 | color: var(--title-color); 198 | } 199 | 200 | .header__logo { 201 | font-weight: 500; 202 | } 203 | 204 | .header__toggle { 205 | font-size: 1.15rem; 206 | cursor: pointer; 207 | } 208 | 209 | /* Show menu */ 210 | .show-menu { 211 | transform: translate(70%); 212 | } 213 | 214 | /* Change background header */ 215 | .scroll-header { 216 | box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1); 217 | } 218 | 219 | /* Active link */ 220 | .active-link { 221 | color: var(--title-color-dark); 222 | } 223 | 224 | /*=============== BREAKPOINTS ===============*/ 225 | /* For small devices */ 226 | @media screen and (max-width: 320px) { 227 | .container { 228 | margin-left: 1rem; 229 | margin-right: 1rem; 230 | } 231 | } 232 | 233 | /* For medium devices */ 234 | @media screen and (min-width: 767px) { 235 | .show-menu { 236 | transform: translate(40%); 237 | } 238 | } 239 | 240 | /* For large devices */ 241 | @media screen and (min-width: 1024px) { 242 | .container { 243 | margin-left: auto; 244 | margin-right: auto; 245 | } 246 | .section { 247 | padding: 7rem 0 2rem; 248 | } 249 | .header__nav { 250 | height: calc(var(--header-height) + 1.5rem); 251 | } 252 | .nav__shape { 253 | width: 350px; 254 | height: 350px; 255 | } 256 | .nav__mask { 257 | width: 100px; 258 | height: 100px; 259 | border-radius: 2rem; 260 | margin-bottom: 2rem; 261 | } 262 | .nav__img { 263 | width: 90px; 264 | } 265 | .nav__link { 266 | font-size: var(--normal-font-size); 267 | } 268 | .nav__link i { 269 | font-size: 1.25rem; 270 | } 271 | } 272 | -------------------------------------------------------------------------------- /assets/img/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-navbar/1291024742314d48aeda4d93927a1693e1f3946e/assets/img/perfil.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW MENU ===============*/ 2 | const headerToggle = document.getElementById('header-toggle'), 3 | main = document.getElementById('main'), 4 | navClose = document.getElementById('nav-close') 5 | 6 | /*===== MENU SHOW =====*/ 7 | /* Validate if constant exists */ 8 | if(headerToggle){ 9 | headerToggle.addEventListener('click', () =>{ 10 | main.classList.add('show-menu') 11 | }) 12 | } 13 | 14 | /*===== MENU HIDDEN =====*/ 15 | /* Validate if constant exists */ 16 | if(navClose){ 17 | navClose.addEventListener('click', () =>{ 18 | main.classList.remove('show-menu') 19 | }) 20 | } 21 | 22 | /*=============== REMOVE MENU MOBILE ===============*/ 23 | const navLink = document.querySelectorAll('.nav__link') 24 | 25 | function linkAction(){ 26 | const main = document.getElementById('main') 27 | // When we click on each nav__link, we remove the show-menu class 28 | main.classList.remove('show-menu') 29 | } 30 | navLink.forEach(n => n.addEventListener('click', linkAction)) 31 | 32 | /*=============== CHANGE BACKGROUND HEADER ===============*/ 33 | function scrollHeader(){ 34 | const header = document.getElementById('header') 35 | // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag 36 | if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header') 37 | } 38 | window.addEventListener('scroll', scrollHeader) 39 | 40 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 41 | const sections = document.querySelectorAll('section[id]') 42 | 43 | function scrollActive(){ 44 | const scrollY = window.pageYOffset 45 | 46 | sections.forEach(current =>{ 47 | const sectionHeight = current.offsetHeight, 48 | sectionTop = current.offsetTop - 58, 49 | sectionId = current.getAttribute('id') 50 | 51 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ 52 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') 53 | }else{ 54 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') 55 | } 56 | }) 57 | } 58 | window.addEventListener('scroll', scrollActive) 59 | -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | html{ 9 | scroll-behavior: smooth; 10 | overflow-x: hidden; 11 | } 12 | 13 | body{ 14 | font-family: var(--body-font); 15 | font-size: var(--normal-font-size); 16 | color: var(--text-color); 17 | overflow-x: hidden; 18 | } 19 | 20 | h1,h2,h3{ 21 | color: var(--title-color); 22 | } 23 | 24 | ul{ 25 | list-style: none; 26 | } 27 | 28 | a{ 29 | text-decoration: none; 30 | } 31 | 32 | img{ 33 | max-width: 100%; 34 | height: auto; 35 | } -------------------------------------------------------------------------------- /assets/scss/components/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /*=============== BREAKPOINTS ===============*/ 2 | /* For small devices */ 3 | @media screen and (max-width: 320px){ 4 | .container{ 5 | margin-left: 1rem; 6 | margin-right: 1rem; 7 | } 8 | } 9 | 10 | /* For medium devices */ 11 | @media screen and (min-width: 767px){ 12 | .show-menu{ 13 | transform: translate(40%) 14 | } 15 | } 16 | 17 | /* For large devices */ 18 | @media screen and (min-width: 1024px){ 19 | .container{ 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | .section{ 25 | padding: 7rem 0 2rem; 26 | } 27 | 28 | .header__nav{ 29 | height: calc(var(--header-height) + 1.5rem); 30 | } 31 | 32 | .nav{ 33 | &__shape{ 34 | width: 350px; 35 | height: 350px; 36 | } 37 | &__mask{ 38 | width: 100px; 39 | height: 100px; 40 | border-radius: 2rem; 41 | margin-bottom: 2rem; 42 | } 43 | &__img{ 44 | width: 90px; 45 | } 46 | &__link{ 47 | font-size: var(--normal-font-size); 48 | 49 | & i{ 50 | font-size: 1.25rem; 51 | } 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /assets/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | /*=============== HEADER Y NAV ===============*/ 2 | .nav{ 3 | background-color: var(--container-color-dark); 4 | padding-top: 2rem; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | width: 100%; 9 | height: 100vh; 10 | 11 | &__shape{ 12 | width: 200px; 13 | height: 200px; 14 | background-color: var(--first-color-shape); 15 | border-radius: 50%; 16 | position: absolute; 17 | top: -2rem; 18 | left: -2rem; 19 | filter: blur(90px); 20 | } 21 | &__close{ 22 | position: relative; 23 | display: inline-flex; 24 | font-size: 1.8rem; 25 | color: var(--text-color-dark); 26 | cursor: pointer; 27 | margin-bottom: 3.5rem; 28 | } 29 | &__img{ 30 | width: 70px; 31 | } 32 | &__mask{ 33 | width: 80px; 34 | height: 80px; 35 | background: linear-gradient( 36 | 224deg, 37 | hsla(277, 81%, 55%, 1) -2%, 38 | hsla(277, 97%, 83%, 1) 97%); 39 | border-radius: 1.5rem; 40 | overflow: hidden; 41 | display: flex; 42 | justify-content: center; 43 | align-items: flex-end; 44 | margin-bottom: 1rem; 45 | } 46 | &__data{ 47 | position: relative; 48 | margin-bottom: 3rem; 49 | } 50 | &__greeting{ 51 | display: block; 52 | color: var(--text-color-dark); 53 | font-size: var(--small-font-size); 54 | font-weight: 500; 55 | margin-bottom: .25rem; 56 | } 57 | &__name{ 58 | color: var(--title-color-dark); 59 | font-size: var(--big-font-size); 60 | line-height: 130%; 61 | } 62 | &__list{ 63 | display: flex; 64 | flex-direction: column; 65 | row-gap: 1.5rem; 66 | } 67 | &__link{ 68 | color: var(--text-color-dark); 69 | display: inline-flex; 70 | align-items: center; 71 | column-gap: 1rem; 72 | font-size: var(--small-font-size); 73 | font-weight: 500; 74 | transition: .3s; 75 | 76 | & i{ 77 | font-size: 1.15rem; 78 | } 79 | 80 | &:hover{ 81 | color: var(--title-color-dark); 82 | } 83 | } 84 | } 85 | 86 | .main{ 87 | position: relative; 88 | background-color: var(--body-color); 89 | transition: .4s; 90 | } 91 | 92 | .header{ 93 | width: 100%; 94 | background-color: var(--body-color); 95 | position: fixed; 96 | top: 0; 97 | left: 0; 98 | z-index: var(--z-fixed); 99 | 100 | &__nav{ 101 | height: var(--header-height); 102 | display: flex; 103 | justify-content: space-between; 104 | align-items: center; 105 | } 106 | &__logo, 107 | &__toggle{ 108 | color: var(--title-color); 109 | } 110 | &__logo{ 111 | font-weight: 500; 112 | } 113 | &__toggle{ 114 | font-size: 1.15rem; 115 | cursor: pointer; 116 | } 117 | } 118 | 119 | /* Show menu */ 120 | .show-menu{ 121 | transform: translate(70%); 122 | } 123 | 124 | /* Change background header */ 125 | .scroll-header { 126 | box-shadow: 0 1px 4px hsla(0, 4%, 15%, .1); 127 | } 128 | 129 | /* Active link */ 130 | .active-link{ 131 | color: var(--title-color-dark); 132 | } -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | --first-color: hsl(273, 97%, 66%); 10 | --first-color-shape: hsl(253, 33%, 32%); 11 | --title-color: hsl(273, 8%, 15%); 12 | --text-color: hsl(273, 4%, 45%); 13 | --body-color: hsl(273, 100%, 99%); 14 | --container-color: #fff; 15 | --title-color-dark: hsl(273, 83%, 98%); 16 | --text-color-dark: hsl(273, 21%, 56%); 17 | --container-color-dark: hsl(273, 80%, 14%); 18 | 19 | /*========== Font and typography ==========*/ 20 | --body-font: 'Poppins', sans-serif; 21 | 22 | --big-font-size: 1.5rem; 23 | --normal-font-size: .938rem; 24 | --small-font-size: .813rem; 25 | 26 | // Responsive typography 27 | @media screen and (min-width: 968px){ 28 | --big-font-size: 2rem; 29 | --normal-font-size: 1rem; 30 | --small-font-size: .875rem; 31 | } 32 | 33 | /*========== z index ==========*/ 34 | --z-fixed: 100; 35 | } -------------------------------------------------------------------------------- /assets/scss/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | /*=============== REUSABLE CSS CLASSES ===============*/ 2 | .container{ 3 | max-width: 1024px; 4 | margin-left: 1.5rem; 5 | margin-right: 1.5rem; 6 | } 7 | 8 | .section{ 9 | padding: 4.5rem 0 1rem; 10 | 11 | // Important, When you insert your content, 12 | // remove the section height class 13 | &__height{ 14 | height: 100vh; 15 | } 16 | } -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'layout/layout'; 4 | @import 'components/header'; 5 | @import 'components/breakpoints'; 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive menu ui - Bedimcode 14 | 15 | 16 | 17 | 64 | 65 | 66 |
67 | 68 | 80 | 81 | 82 | 83 | 84 |
85 |

HOME

86 | 87 |
88 | 89 | 90 |
91 |

ABOUT

92 | 93 |
94 | 95 | 96 |
97 |

PORTFOLIO

98 | 99 |
100 | 101 | 102 |
103 |

SKILLS

104 | 105 |
106 | 107 | 108 |
109 |

CONTACT

110 | 111 |
112 |
113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-navbar/1291024742314d48aeda4d93927a1693e1f3946e/preview.png --------------------------------------------------------------------------------