html - CSS Nav overflows container -
i have css navigation not responding the container. in jsfiddle here working fine. when put on website here mobile menu drop down link goes top right of wrapper , doesn't stay in container. if shrink screen see. on website outside of header section thought there might have been conflicting code.
css
.nav-mobile { display: none; position: absolute; top: 0; right: 0; background: $nav-background; height: $nav-height; width: $nav-height; } @media screen , (max-width: $breakpoint) { // hamburger nav visible on mobile .nav-mobile { display: block; } nav { width: 100%; padding: $nav-height 0 15px; ul { display: none; li { float: none; { padding: 15px; line-height: 20px; } ul li { padding-left: 30px; } } } } .nav-dropdown { position: static; } } @media screen , (min-width: $breakpoint) { .nav-list { display: block !important; } } #nav-toggle { position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px; span, span:before, span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: $nav-font-color; position: absolute; display: block; content: ''; transition: 300ms ease-in-out; } span:before { top: -10px; } span:after { bottom: -10px; } &.active span { background-color: transparent; &:before, &:after { top: 0; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } } }
add below css in nav
tag
// navigation nav { position: relative;
Comments
Post a Comment