├── .gitignore ├── README.md ├── navbar #1 ├── index.html └── style.css └── navbar #2 ├── index.html ├── logo.png ├── logo.svg └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A collection of ready to use navbars built using CSS. -------------------------------------------------------------------------------- /navbar #1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | Navbar #1 | AsmrProg 11 | 12 | 13 | 14 | 29 | 30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /navbar #1/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background: #3b3d43; 9 | } 10 | 11 | button{ 12 | border: 0; 13 | padding: 0; 14 | font-family: inherit; 15 | background: transparent; 16 | color: inherit; 17 | cursor: pointer; 18 | } 19 | 20 | .navbar{ 21 | position: fixed; 22 | z-index: 1; 23 | top: 0; 24 | left: 0; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | width: 100%; 29 | height: 64px; 30 | background: #19191c; 31 | color: #f9f9f9; 32 | font-family: 'Poppins'; 33 | } 34 | 35 | .navbar-overlay{ 36 | position: fixed; 37 | z-index: 2; 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: rgba(0, 0, 0, 0.5); 43 | visibility: hidden; 44 | opacity: 0; 45 | transition: 0.5s; 46 | } 47 | 48 | body.open .navbar-overlay{ 49 | visibility: visible; 50 | opacity: 1; 51 | } 52 | 53 | .navbar-burger{ 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | display: grid; 58 | place-items: center; 59 | width: 64px; 60 | height: 64px; 61 | padding: 0; 62 | } 63 | 64 | .navbar-title{ 65 | margin: 0; 66 | font-size: 16px; 67 | } 68 | 69 | .navbar-menu{ 70 | position: fixed; 71 | z-index: 3; 72 | top: 0; 73 | left: 0; 74 | translate: -100% 0; 75 | width: 270px; 76 | height: 100%; 77 | padding: 20px; 78 | display: flex; 79 | gap: 8px; 80 | flex-direction: column; 81 | align-items: flex-start; 82 | background: #000; 83 | visibility: hidden; 84 | transition: all 0.3s; 85 | } 86 | 87 | body.open .navbar-menu{ 88 | translate: 0 0; 89 | visibility: visible; 90 | } 91 | 92 | .navbar-menu > button{ 93 | color: rgba(255,255,255,0.5); 94 | background: transparent; 95 | padding: 0 8px; 96 | transition: all 0.3s; 97 | } 98 | 99 | .navbar-menu > button.active{ 100 | color: inherit; 101 | } 102 | 103 | .navbar-menu > button.active:hover{ 104 | color: rgba(255, 255, 255, 0.75); 105 | } 106 | 107 | @media only screen and (min-width: 600px){ 108 | .navbar{ 109 | justify-content: space-between; 110 | padding: 0 0 0 16px; 111 | } 112 | .navbar-overlay{ 113 | display: none; 114 | } 115 | .navbar-burger{ 116 | display: none; 117 | } 118 | .navbar-menu{ 119 | position: static; 120 | translate: 0 0; 121 | width: auto; 122 | background: transparent; 123 | flex-direction: row; 124 | visibility: visible; 125 | } 126 | } -------------------------------------------------------------------------------- /navbar #2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Navbar #2 | AsmrProg 11 | 12 | 13 | 14 | 15 | 18 | 19 | 38 | 39 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /navbar #2/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/css-navbars/bb68b93b176c4e40d0a47eb4decb742f05b200d4/navbar #2/logo.png -------------------------------------------------------------------------------- /navbar #2/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /navbar #2/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background: #e6edf2; 9 | font-family: 'Poppins'; 10 | } 11 | 12 | button{ 13 | display: grid; 14 | place-items: center; 15 | width: 40px; 16 | height: 72px; 17 | border: 0; 18 | padding: 0; 19 | background: transparent; 20 | color: #585c62; 21 | cursor: pointer; 22 | font-family: inherit; 23 | } 24 | 25 | .burger{ 26 | position: fixed; 27 | z-index: 2; 28 | top: 0; 29 | left: 0; 30 | width: 72px; 31 | } 32 | 33 | .navbar{ 34 | position: fixed; 35 | z-index: 1; 36 | top: 0; 37 | left: 0; 38 | height: 100%; 39 | padding: 20px 24px 0; 40 | display: flex; 41 | gap: 10px; 42 | flex-direction: column; 43 | align-items: center; 44 | justify-content: flex-start; 45 | background: #fff; 46 | box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1); 47 | transition-property: translate, opacity, visibility; 48 | transition-duration: 0.5s; 49 | translate: -100% 0; 50 | visibility: hidden; 51 | opacity: 0; 52 | } 53 | 54 | body.open .navbar{ 55 | opacity: 1; 56 | visibility: visible; 57 | translate: 0 0; 58 | } 59 | 60 | .logo{ 61 | display: flex; 62 | align-items: center; 63 | gap: 8px; 64 | width: 108px; 65 | padding-right: 10px; 66 | margin-bottom: 10px; 67 | } 68 | 69 | .logo img{ 70 | width: 32px; 71 | } 72 | 73 | .logo span{ 74 | font-size: 18px; 75 | color: #606468; 76 | } 77 | 78 | .search{ 79 | margin: 0 auto; 80 | position: relative; 81 | color: #888989; 82 | } 83 | 84 | .search span{ 85 | position: absolute; 86 | top: 50%; 87 | left: 16px; 88 | translate: 0 -50%; 89 | z-index: 1; 90 | font-size: 20px; 91 | color: inherit; 92 | } 93 | 94 | .search input{ 95 | width: 100%; 96 | height: 44px; 97 | padding-left: 46px; 98 | font-size: 16px; 99 | border: 0; 100 | border-radius: 8px; 101 | background: #eff1f2; 102 | color: inherit; 103 | font-family: inherit; 104 | outline: none; 105 | } 106 | 107 | .navbar nav{ 108 | display: flex; 109 | align-items: center; 110 | padding-right: 20px; 111 | } 112 | 113 | .navbar nav img{ 114 | flex: 0 32px; 115 | width: 32px; 116 | height: 32px; 117 | margin-left: 8px; 118 | } 119 | 120 | @media (width >=500px){ 121 | .navbar{ 122 | translate: 0 0; 123 | flex-direction: row; 124 | align-items: center; 125 | justify-content: flex-end; 126 | gap: 0; 127 | width: 100%; 128 | height: 72px; 129 | padding: 0 0 0 72px; 130 | } 131 | .logo{ 132 | margin-bottom: 0; 133 | } 134 | .search{ 135 | flex: 1 1 auto; 136 | } 137 | } 138 | 139 | @media (width >= 550px){ 140 | .search{ 141 | flex: 0 0 auto; 142 | } 143 | } 144 | 145 | @media (width >= 600px){ 146 | .navbar{ 147 | opacity: 1; 148 | visibility: visible; 149 | } 150 | } 151 | 152 | @media (width >= 650px){ 153 | .search input{ 154 | width: 280px; 155 | } 156 | } --------------------------------------------------------------------------------