Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- overflow-x: hidden;
- }
- .swiper-button-prev,
- .swiper-button-next,
- .swiper-wrapper,
- .swiper-slide,
- .swiper-pagination {
- overflow-x: initial
- }
- .nav-bar {
- position: fixed;
- width: 100vw;
- height: 60px;
- display: flex;
- justify-content: space-around;
- align-items: center;
- background-color: #999999;
- overflow-x: initial;
- }
- .logo {
- color: black;
- text-decoration: none;
- }
- .nav-items {
- width: 30vw;
- display: flex;
- justify-content: space-around;
- list-style: none;
- }
- .nav-item {
- color: black;
- text-decoration: none;
- }
- .burger {
- display: none;
- cursor: pointer;
- }
- .burger div {
- width: 32px;
- height: 5px;
- border-radius: 5px;
- background-color: white;
- margin: 4px;
- }
- .main {
- width: 100vw;
- padding-top: 60px;
- display: flex;
- flex-direction: column;
- }
- .home {
- min-height: calc(100vh - 60px);
- background-color: yellow;
- }
- .sobre {
- min-height: calc(100vh - 60px);
- background-color: red;
- }
- .swiper-container {
- width: 100vw;
- height: calc(100vh - 60px);
- }
- @media screen and (max-width: 500px) {
- .nav-bar {
- position: fixed;
- width: 100vw;
- height: 60px;
- display: flex;
- justify-content: space-around;
- align-items: center;
- background-color: #999999;
- }
- .nav-items {
- position: absolute;
- z-index: -1;
- height: calc(100vh - 60px);
- top: -100vh;
- width: 100vw;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- transition: transform 0.3s ease-in;
- background-color: #999999;
- }
- .burger {
- display: block;
- }
- }
- .nav-active {
- transform: translateY(calc(100vh + 60px));
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement