style.css in Simple Mega Menu 2.0.x
Same filename in this branch
Same filename and directory in other branches
body { overflow-x: hidden; } .menu--simple-mega-menu { position: relative; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper { display: none; width: 100%; position: absolute; top: 100%; z-index: 9; left: 0; background: #fff; padding: 1rem; opacity: 0; transition: opacity 1s ease; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item { flex: 0 1 auto; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom .field-item { flex: 0 1 auto; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper ul.mega-menu-item { flex-basis: 300px; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-background { position: absolute; width: 200vw; height: 100%; left: -50vw; top: 0; background: #fbfbfb; z-index: -1; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item { float: none; } .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item a { float: none; border-radius: 0; } .menu--simple-mega-menu > .menu-item--expanded:hover > .mega-menu-wrapper, .menu--simple-mega-menu > .menu-item--expanded:focus > .mega-menu-wrapper, .menu--simple-mega-menu > .menu-item--expanded.focused > .mega-menu-wrapper { opacity: 1; transition: opacity 1s ease; display: flex; }
File
css/style.cssView source
- body {
- overflow-x: hidden;
- }
- .menu--simple-mega-menu {
- position: relative;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper {
- display: none;
- width: 100%;
- position: absolute;
- top: 100%;
- z-index: 9;
- left: 0;
- background: #fff;
- padding: 1rem;
- opacity: 0;
- transition: opacity 1s ease;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: flex-start;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item {
- flex: 0 1 auto;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: flex-start;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom .field-item {
- flex: 0 1 auto;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper ul.mega-menu-item {
- flex-basis: 300px;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-background {
- position: absolute;
- width: 200vw;
- height: 100%;
- left: -50vw;
- top: 0;
- background: #fbfbfb;
- z-index: -1;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item {
- float: none;
- }
- .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item a {
- float: none;
- border-radius: 0;
- }
- .menu--simple-mega-menu > .menu-item--expanded:hover > .mega-menu-wrapper,
- .menu--simple-mega-menu > .menu-item--expanded:focus > .mega-menu-wrapper,
- .menu--simple-mega-menu > .menu-item--expanded.focused > .mega-menu-wrapper {
- opacity: 1;
- transition: opacity 1s ease;
- display: flex;
- }