/* --------------- Primary Menu ------------ */ .region-primary-menu { clear: both; } .region-primary-menu .menu { font-size: 0.929em; margin: 0 5px; padding: 0; text-align: left; /* LTR */ } [dir="rtl"] .region-primary-menu .menu { text-align: right; margin-left: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */ margin-right: 5px; /* This is required to win over specificity of [dir="rtl"] ul.menu */ } .region-primary-menu .menu-item { float: none; list-style: none; margin: 0; padding: 0; height: auto; width: 100%; } .region-primary-menu .menu a { color: #333; background: #ccc; background: rgba(255, 255, 255, 0.7); float: none; display: block; text-decoration: none; text-shadow: 0 1px #eee; border-radius: 8px; margin: 4px 0; padding: 0.9em 0 0.9em 10px; /* LTR */ } [dir="rtl"] .region-primary-menu .menu a { padding: 0.9em 10px 0.9em 0; } .region-primary-menu .menu a:hover, .region-primary-menu .menu a:focus { background: #f6f6f2; background: rgba(255, 255, 255, 0.95); } .region-primary-menu .menu a:active { background: #b3b3b3; background: rgba(255, 255, 255, 1); } .region-primary-menu .menu-item a.is-active { border-bottom: none; } /* ---------- Primary Menu Toggle ----------- */ /* Hide the toggle by default. */ .menu-toggle, .menu-toggle-target { display: none; } /* Unhide it for the primary menu. */ .region-primary-menu .menu-toggle-target { display: inherit; position: fixed; top: 0; } .region-primary-menu .menu-toggle { display: none; } body:not(:target) .region-primary-menu .menu-toggle { color: #333; background: #ccc; background: rgba(255, 255, 255, 0.7); float: none; font-size: 0.929em; display: block; text-decoration: none; text-shadow: 0 1px #eee; padding: 0.9em 10px 0.9em 10px; z-index: 1000; } body:not(:target) .region-primary-menu .menu-toggle:after { content:""; background: url(../../../../misc/icons/ffffff/hamburger.svg) no-repeat; background-size: contain; width: 22px; height: 22px; display: inline-block; position: absolute; right: 10px; /* LTR */ } [dir="rtl"] body:not(:target) .region-primary-menu .menu-toggle:after { right: initial; left: 10px; } body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle, body:not(:target) .region-primary-menu .menu-toggle--hide { display: none; } body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu-toggle--hide { display: block; } body:not(:target) .region-primary-menu .menu-item { height: 0; overflow: hidden; } body:not(:target) .region-primary-menu .menu-toggle-target-show:target ~ .menu .menu-item { height: auto; overflow: visible; } /** * Media queries for primary menu. */ @media all and (min-width: 461px) and (max-width: 900px) { .region-primary-menu .menu { margin: 0 5px; padding: 0; text-align: center; } /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu */ [dir="rtl"] .region-primary-menu .menu { text-align: center; } .region-primary-menu .menu-item, body:not(:target) .region-primary-menu .menu-item { float: left; /* LTR */ margin-right: 5px; /* LTR */ padding: 0; display: inline-block; width: 32.75%; height: auto; overflow: visible; } [dir="rtl"] .region-primary-menu .menu-item, [dir="rtl"] body:not(:target) .region-primary-menu .menu-item { float: right; margin-left: 5px; margin-right: 0; } .region-primary-menu .menu-item:nth-child(3n) { margin-right: -5px; /* LTR */ } [dir="rtl"] .region-primary-menu .menu-item:nth-child(3n) { margin-left: -5px; margin-right: 0; } .region-primary-menu .menu a { float: none; display: block; border-radius: 8px; margin-bottom: 5px; padding: 0.9em 5px; } /* This is required to win over specificity of the global [dir="rtl"] .region-primary-menu .menu a */ [dir="rtl"] .region-primary-menu .menu a { padding: 0.9em 5px; } body:not(:target) .region-primary-menu .menu-toggle { display: none; } } @media all and (min-width: 901px) { .region-primary-menu .block-menu .menu { font-size: 0.929em; margin: 0; padding: 0 15px; } .region-primary-menu .menu-item, body:not(:target) .region-primary-menu .menu-item { float: left; /* LTR */ list-style: none; padding: 0 1px; margin: 0 1px; width: auto; height: auto; overflow: visible; } [dir="rtl"] .region-primary-menu .menu-item, [dir="rtl"] body:not(:target) .region-primary-menu .menu-item { float: right; } .region-primary-menu .menu a { float: left; /* LTR */ padding: 0.7em 0.8em; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] .region-primary-menu .menu a { float: right; padding: 0.7em 0.8em; } .featured .region-primary-menu .menu-item a:active, .featured .region-primary-menu .menu-item a.is-active { background: #f0f0f0; background: rgba(240, 240, 240, 1.0); } body:not(:target) .region-primary-menu .menu-toggle { display: none; } }