.hex-menu .hm-container { position:relative; background-color:#6c6c6c; display:inline-block; width:100%; clip-path: polygon(0 50%, 40px 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 40px 100%); margin-bottom:10px; height:80px; transition:0.25s; } .hex-menu .hm { position: absolute; width:100%; text-align:center; color:#FFFFFF; text-transform: uppercase; top: 30%; left: 0; right: 0; } .hex-menu .hm-container img { display:none; } @media only screen and (min-width: 767px) { .hex-menu { position: relative; width:100%; padding-bottom:40%; } .hex-menu .hm-container { position: absolute; width:calc(33.3% - 10px); clip-path: polygon(0% 30%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%); height:auto; } .hex-menu .hm-dummy{ margin-top: 115%; /* width to height ratio. */ } .hex-menu { padding-bottom:40%; } .hex-menu .hm p { padding:5px 5px } .hm-padding { padding-top:78%; // adjust to menu size. } .hex-menu .hm-container img { display: inline; } .hex-menu .hm-sm-col1 {left: 0%;} .hex-menu .hm-sm-col2 {left: 33.3%;} .hex-menu .hm-sm-col3 {left: 66.6%;} .hex-menu .hm-sm-row1 {top: 0%; margin-left:0%;} .hex-menu .hm-sm-row2 {top: 66.67%; margin-left:16.67%;} .hex-menu .hm-sm-row3 {top: 133.33%; margin-left:0%;} .hex-menu .hm-sm-row4 {top: 200%; margin-left:16.67%;} .hex-menu .hm-sm-row5 {top: 266.67%; margin-left:0%;} .hex-menu .hm-sm-row6 {top: 333.33%; margin-left:16.67%;} .hex-menu .hm-sm-row7 {top: 400%; margin-left:0%;} .hex-menu .hm-sm-row8 {top: 466.66%; margin-left:16.67%;} } @media only screen and (min-width: 1024px) { .hex-menu .hm-container { width:calc(20% - 10px); } .hex-menu .hm p { padding:0 20px } .hm-padding { padding-top:15%; // adjust to menu size. } .hex-menu .hm-lg-col1 {left: 0%;} .hex-menu .hm-lg-col2 {left: 20%;} .hex-menu .hm-lg-col3 {left: 40%;} .hex-menu .hm-lg-col4 {left: 60%;} .hex-menu .hm-lg-col5 {left: 80%;} .hex-menu .hm-lg-row1 {top: 0%; margin-left:0%;} .hex-menu .hm-lg-row2 {top: 40%; margin-left:10%;} .hex-menu .hm-lg-row3 {top: 80%; margin-left:0%;} .hex-menu .hm-lg-row4 {top: 120%; margin-left:10%;} .hex-menu .hm-lg-row5 {top: 160%; margin-left:0%;} } .hex-menu .hm-container:hover { background-color:#193763; }