├── .gitattributes ├── README.md ├── LICENSE ├── index.html └── styles.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # responsive-navbar 2 | Responsive navbar made from pure css 3 | 4 | https://devansharora18.github.io/responsive-navbar 5 | 6 | ![image](https://user-images.githubusercontent.com/68769374/188292888-8caf6416-c814-43bd-8c61-64f66eaa4b0e.png) 7 | 8 | ![image](https://user-images.githubusercontent.com/68769374/188292904-45ec1872-1405-416d-bd8c-2327cdce9a5a.png) 9 | 10 | 11 | 12 | https://user-images.githubusercontent.com/68769374/188292910-74393d01-a484-468e-b1eb-4d690336f63a.mp4 13 | 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ART3MISTICAL 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Navbar 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 19 | 20 | 27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | background-color: #24252A; 8 | } 9 | 10 | li, a, button, .logo { 11 | font-family: "Montserrat", sans-serif; 12 | font-weight: 500; 13 | font-size: 16px; 14 | color: whitesmoke; 15 | text-decoration: none; 16 | } 17 | 18 | #click { 19 | display: none; 20 | } 21 | 22 | header { 23 | position: fixed; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | padding-top: 30px; 28 | padding-bottom: 30px; 29 | padding-left: 10%; 30 | padding-right: 10%; 31 | width: 100vw; 32 | } 33 | 34 | .nav__links { 35 | list-style: none; 36 | } 37 | 38 | .nav__links li { 39 | display: inline-block; 40 | padding-top: 0px; 41 | padding-bottom: 0px; 42 | padding-left: 20px; 43 | padding-right: 20px; 44 | } 45 | 46 | .nav__links li a { 47 | transition: all 0.3s ease 0s; 48 | } 49 | 50 | .nav__links li a:hover, .active { 51 | color: #0088A9; 52 | } 53 | 54 | button { 55 | padding-top: 9px; 56 | padding-bottom: 9px; 57 | padding-left: 25px; 58 | padding-right: 25px; 59 | background-color: rgba(0, 136, 169, 1); 60 | border: none; 61 | border-radius: 50px; 62 | cursor: pointer; 63 | transition: all 0.3s ease 0s; 64 | } 65 | 66 | button:hover { 67 | background-color: rgba(0, 136, 169, 0.8); 68 | } 69 | 70 | .logo { 71 | font-size: 18px; 72 | font-weight: 600; 73 | } 74 | 75 | .menu-btn { 76 | color: white; 77 | display: none; 78 | cursor: pointer; 79 | padding-left: 10px; 80 | } 81 | 82 | @media (max-width: 1250px) { 83 | .nav__links { 84 | position: fixed; 85 | top: 80px; 86 | left: -100%; 87 | background-color: #24252A; 88 | height: 100vh; 89 | width: 100%; 90 | display: block; 91 | text-align: center; 92 | transition: all 0.3s ease; 93 | } 94 | 95 | .cta { 96 | display: inline-flex; 97 | position: fixed; 98 | bottom: 80px; 99 | width: 100vw; 100 | left: -100; 101 | justify-content: center; 102 | transition: all 0.3s ease; 103 | } 104 | 105 | 106 | #click:not(:checked) ~ .nav__links{ 107 | left: -100%; 108 | } 109 | 110 | #click:not(:checked) ~ .cta{ 111 | left: -100%; 112 | } 113 | 114 | #click:checked ~ .nav__links { 115 | left: 0%; 116 | } 117 | 118 | #click:checked ~ .cta{ 119 | left: 0%; 120 | } 121 | 122 | #click:checked ~ .menu-btn i:before { 123 | content: "\f00d"; 124 | } 125 | 126 | .nav__links li { 127 | display: block; 128 | margin-top: 40px; 129 | } 130 | 131 | .menu-btn { 132 | display: inline-block; 133 | } 134 | } --------------------------------------------------------------------------------