Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .top-nav {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
- color: rgb(202, 0, 0);
- height: 50px;
- padding: 1em;
- }
- .menu {
- display: flex;
- flex-direction: row;
- list-style-type: none;
- margin: 0;
- padding: 0;
- visibility: hidden;
- }
- .menu > li {
- margin: 0 1rem;
- overflow: hidden;
- }
- .menu-button-container {
- display: none;
- height: 10%;
- width: 10px;
- cursor: pointer;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position:absolute;
- left:217px;
- top:114px;
- }
- #menu-toggle {
- display: none;
- }
- .quadrado-hamburguer{
- background-color: #3d3d3d;
- width:40px;
- height: 40px;
- position:absolute;
- left:202px;
- top:129px;
- visibility: hidden;
- }
- .menu-button,
- .menu-button::before,
- .menu-button::after {
- display: block;
- background-color: #ffffff;
- position: absolute;
- height:3px;
- width: 22px;
- transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
- border-radius: 2px;
- }
- .menu-button::before {
- content: '';
- margin-top: -7px;
- }
- .menu-button::after {
- content: '';
- margin-top: 7px;
- }
- #menu-toggle:checked + .menu-button-container .menu-button::before {
- margin-top: 0px;
- transform: rotate(405deg);
- }
- #menu-toggle:checked + .menu-button-container .menu-button {
- background: rgba(255, 255, 255, 0);
- }
- #menu-toggle:checked + .menu-button-container .menu-button::after {
- margin-top: 0px;
- transform: rotate(-405deg);
- }
- .logo2{
- visibility: hidden;
- }
- @media (max-width: 700px) {
- .menu-button-container {
- display: flex;
- }
- .menu {
- position: absolute;
- top: 0;
- margin-top: 50px;
- left: 0;
- flex-direction: column;
- width: 100%;
- justify-content: center;
- align-items: center;
- visibility: visible;
- z-index: 999;
- position: absolute;
- top:120px;
- }
- #menu-toggle ~ .menu li {
- height: 0;
- margin: 0;
- padding: 0;
- border: 0;
- transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
- }
- #menu-toggle:checked ~ .menu li {
- border: 1px solid #333;
- height: 2.5em;
- padding: 0.5em;
- transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
- }
- .menu > li {
- display: flex;
- justify-content: center;
- margin: 0;
- padding: 0.5em 0;
- width: 100%;
- color: white;
- background-color: #222;
- }
- .menu > li:not(:last-child) {
- border-bottom: 1px solid #444;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement