.block .layout-container { display: flex; flex-direction: row; padding: 0px 10px; } /** MENU'S **/ .block .menu { width: 100%; display: flex; flex-direction: row; cursor: pointer; margin: auto; } .block .menu ul { display: flex; flex-direction: row; flex-wrap: wrap; } .block .menu ul li { white-space: nowrap; padding: 10px; } /** BLOCK-TOP **/ .block-top .menu { justify-content: flex-end; } /** BLOCK-CENTER **/ .block-center > * > * > .layout-container { position: relative; } .block-center .item.logo { padding: 20px 10px; } .block-center .item.logo a { width: 100%; max-width: 250px; height: 100%; max-height: 75px; display: flex; flex-direction: column; justify-content: center; } .block-center .item.logo img { width: 100%; height: 100%; display: block; transition: all 1s ease; cursor: pointer; z-index: 10; } .block-center .menu { display: contents; } .block-center .menu-main { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .block-center .menu-pulldown { margin-left: auto; } .top > .layout-section:is( [max-width~="768px"] ) .menu-main { display: none; } .top > .layout-section:is( [min-width~="768px"] ) .menu-pulldown { display: none; } .top:is(.open) > .layout-section .menu-main { position: fixed; width: 100%; height: 100vh; top: 0px; left: 0px; display: flex; flex-direction: column; justify-content: center; background-color: rgba( 255, 255, 255, 1 ); } .top:is(.open) > .layout-section .menu ul { display: flex; flex-direction: column; text-align: center; margin: auto; } .top:is(.open) > .layout-section .menu ul li { padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); } .top > .layout-section .menu-pulldown { z-index: 10; padding: 10px; } .top > .layout-section .menu-pulldown::before { display: block; width: 32px; height: 26px; content: url(https://assets.silksites.nl/misc/icons/menu-pulldown-icon.svg); } .item.menu-main.pulldown ul { display: none; }