├── .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 | }
--------------------------------------------------------------------------------