.widget_nav_menu { .menu-resources-menu-container { position: relative; margin-right: $global-margin; } ul.menu { list-style: none; text-align: left; li { position: relative; margin-right: $global-margin/2; } a { display:block; color: $black; justify-content: left !important; } .is-active > a { background: unset; color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%) } width:auto; li.menu-item-has-children { > a { &:after { display:block; width:0; height:0; border:inset 6px; content:''; border-bottom-width:0; border-top-style:solid; border-color: $anchor-color-alt transparent transparent transparent; margin-top: 0px; margin-left: 5px; position: absolute; right: 0; top: 42%; } } ul.sub-menu { list-style: none; background-color: scale-color($anchor-color, $lightness: 98%); position: absolute; left:0%; top:0; margin:0; padding:0; width: auto; visibility:hidden; opacity:0; transition: transform 0.5s; transform: translateY(-$global-padding); li.menu-item-has-children { > a { &:after { position: absolute; right: 0; margin-left: 10px; margin-right: 2px; border-bottom-width: 6px; border-right-width: 0; border-right-style:solid; border-color: transparent transparent transparent $anchor-color-alt; } } } } &:hover { > a { color: scale-color($anchor-color, $lightness: 50%); &:after { color: scale-color($anchor-color, $lightness: 50%); } } > ul.sub-menu { top:100%; visibility: visible; opacity: 1; transform: translateY(0px); &:hover { background-color: scale-color($anchor-color, $lightness: 98%); } ul.sub-menu { top: 0%; left: 100%; } } } } } } .widget_tag_cloud { position: relative; overflow: visible; margin-left: $global-margin; $tags-background-color: scale-color($anchor-color, $lightness: 95%); a { display: inline; color: $black; &:before, &:after { display: inline-block; } } h6 { visibility: hidden; opacity: 0; width: 0; height: 0; } &:before { content: '#tags'; color: $primary-color; background-color: $tags-background-color; padding:$global-padding/4 $global-padding/2; } &:hover{ .tagcloud { top: 1.6rem; visibility: visible; opacity: 1; transform: translateY(0px); background-color: scale-color($tags-background-color, $alpha: -100%); @include breakpoint(small){ width: 80vw; right: -1rem; text-align: right; } @include breakpoint(medium){ width: 90vw; right: -15vw; text-align: center; } @include breakpoint(large){ width: 90vw; right: -25vw; } } } .tagcloud { position: absolute; visibility:hidden; opacity:0; transition: transform 0.5s,background-color 0.5s; transform: translateY(-$global-padding); background-color: $tags-background-color; padding: $global-padding; a { display: inline-block !important; background-color: $tags-background-color; padding:$global-padding/4 $global-padding/2; font-size: $global-font-size * 0.7 !important; &:before { content: '#'; display: inline-block; } &:hover { color: $anchor-color; } } } } .breadcrumbs { color: scale-color($anchor-color, $saturation: -50%, $lightness: 60%); font-size: $global-font-size *1.2; margin:0; padding:0; } @include breakpoint(small){ } @include breakpoint(medium){ } @include breakpoint(large){ }