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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -