├── README.md
├── index.html
├── logo.jpg
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # simple and responsive navbar using css
2 | ### video tutorial for this nav bar is in the following channel : https://www.youtube.com/channel/UCkKfzDMKET_5WhqaS9LrDHA
3 |
4 | ### for more videos and example please subscribe to this channel. Thank you.
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | nav bar
8 |
9 |
10 |
11 |
12 |
13 |
14 |
30 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrBhola/simple-navbar-css/ee0dea16c30eba5e386905b24d5c254f1c53a042/logo.jpg
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: Arial, Helvetica, sans-serif;
9 | }
10 |
11 | .navbar {
12 | font-size: 18px;
13 | background: linear-gradient(9deg, #c02c2c, #2cc05d, #962cc0, #c02c51, #2cb6c0, #c0aa2c);
14 | border-bottom: #615858 4px solid;
15 | border-bottom-left-radius: 40px;
16 | border-bottom-right-radius: 40px;
17 | padding-bottom: 10px;
18 | }
19 |
20 | .main-nav {
21 | list-style-type: none;
22 | display: none;
23 | }
24 |
25 | .nav-links, .logo, .material-icons {
26 | text-decoration: none;
27 | color: ghostwhite;
28 | opacity: 0.6;
29 | }
30 |
31 | .main-nav li {
32 | text-align: center;
33 | margin: 10px auto;
34 | }
35 |
36 | .logo {
37 | display: flex;
38 | font-size: 24px;
39 | margin-top: 10px;
40 | margin-left: 30px;
41 | }
42 |
43 | .logo img {
44 | height: 50px;
45 | width: 50px;
46 | border-radius: 50px;
47 | }
48 |
49 | .logo p {
50 | margin-top: 12px;
51 | padding-left: 5px;
52 | }
53 |
54 | .toggle-nav {
55 | position: absolute;
56 | top: 20px;
57 | right: 20px;
58 | }
59 |
60 | .material-icons {
61 | font-size: 24px;
62 | }
63 |
64 | .active {
65 | display: block;
66 | }
67 |
68 | /* For large screen more than 600 */
69 |
70 | @media screen and (min-width:600px) {
71 | .navbar {
72 | display: flex;
73 | justify-content: space-between;
74 | padding-bottom: 0;
75 | height: 70px;
76 | align-items: center;
77 | }
78 | .toggle-nav {
79 | display: none;
80 | }
81 | .main-nav {
82 | display: flex;
83 | justify-content: end;
84 | margin-right: 30px;
85 | }
86 | .main-nav>li {
87 | margin: 0;
88 | }
89 | .nav-links {
90 | margin-left: 20px;
91 | }
92 | .logo {
93 | margin-top: 0;
94 | }
95 | }
--------------------------------------------------------------------------------