Spearhead: Try a different approach for Spearhead
This commit is contained in:
parent
33f7aff2e2
commit
65a70cf91e
14 changed files with 329 additions and 112 deletions
|
@ -287,8 +287,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul,
|
||||
.woo-navigation > div > ul {
|
||||
.primary-navigation div > ul,
|
||||
.woo-navigation div > ul {
|
||||
display: flex;
|
||||
justify-content: var(--primary-nav--justify-content);
|
||||
flex-wrap: wrap;
|
||||
|
@ -300,55 +300,55 @@
|
|||
/* Sub-menus Flyout */
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul ul,
|
||||
.woo-navigation > div > ul ul {
|
||||
.primary-navigation div > ul ul,
|
||||
.woo-navigation div > ul ul {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
|
||||
.woo-navigation > div > ul li:hover,
|
||||
.woo-navigation > div > ul li:focus-within {
|
||||
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
|
||||
.woo-navigation div > ul li:hover,
|
||||
.woo-navigation div > ul li:focus-within {
|
||||
cursor: pointer;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: inherit;
|
||||
width: inherit;
|
||||
/* Submenu display */
|
||||
}
|
||||
.primary-navigation > div > ul li:hover > ul,
|
||||
.primary-navigation > div > ul li:focus-within > ul,
|
||||
.primary-navigation > div > ul li ul:hover,
|
||||
.primary-navigation > div > ul li ul:focus,
|
||||
.woo-navigation > div > ul li:hover > ul,
|
||||
.woo-navigation > div > ul li:focus-within > ul,
|
||||
.woo-navigation > div > ul li ul:hover,
|
||||
.woo-navigation > div > ul li ul:focus {
|
||||
.primary-navigation div > ul li:hover > ul,
|
||||
.primary-navigation div > ul li:focus-within > ul,
|
||||
.primary-navigation div > ul li ul:hover,
|
||||
.primary-navigation div > ul li ul:focus,
|
||||
.woo-navigation div > ul li:hover > ul,
|
||||
.woo-navigation div > ul li:focus-within > ul,
|
||||
.woo-navigation div > ul li ul:hover,
|
||||
.woo-navigation div > ul li ul:focus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
background: var(--global--color-background);
|
||||
box-shadow: var(--global--elevation);
|
||||
|
@ -362,8 +362,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu .sub-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -287,8 +287,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul,
|
||||
.woo-navigation > div > ul {
|
||||
.primary-navigation div > ul,
|
||||
.woo-navigation div > ul {
|
||||
display: flex;
|
||||
justify-content: var(--primary-nav--justify-content);
|
||||
flex-wrap: wrap;
|
||||
|
@ -300,55 +300,55 @@
|
|||
/* Sub-menus Flyout */
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul ul,
|
||||
.woo-navigation > div > ul ul {
|
||||
.primary-navigation div > ul ul,
|
||||
.woo-navigation div > ul ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
|
||||
.woo-navigation > div > ul li:hover,
|
||||
.woo-navigation > div > ul li:focus-within {
|
||||
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
|
||||
.woo-navigation div > ul li:hover,
|
||||
.woo-navigation div > ul li:focus-within {
|
||||
cursor: pointer;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: inherit;
|
||||
width: inherit;
|
||||
/* Submenu display */
|
||||
}
|
||||
.primary-navigation > div > ul li:hover > ul,
|
||||
.primary-navigation > div > ul li:focus-within > ul,
|
||||
.primary-navigation > div > ul li ul:hover,
|
||||
.primary-navigation > div > ul li ul:focus,
|
||||
.woo-navigation > div > ul li:hover > ul,
|
||||
.woo-navigation > div > ul li:focus-within > ul,
|
||||
.woo-navigation > div > ul li ul:hover,
|
||||
.woo-navigation > div > ul li ul:focus {
|
||||
.primary-navigation div > ul li:hover > ul,
|
||||
.primary-navigation div > ul li:focus-within > ul,
|
||||
.primary-navigation div > ul li ul:hover,
|
||||
.primary-navigation div > ul li ul:focus,
|
||||
.woo-navigation div > ul li:hover > ul,
|
||||
.woo-navigation div > ul li:focus-within > ul,
|
||||
.woo-navigation div > ul li ul:hover,
|
||||
.woo-navigation div > ul li ul:focus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
background: var(--global--color-background);
|
||||
box-shadow: var(--global--elevation);
|
||||
|
@ -362,8 +362,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu .sub-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -239,7 +239,7 @@
|
|||
}
|
||||
|
||||
// Menu list wrapper
|
||||
& > div > ul {
|
||||
& div > ul {
|
||||
display: flex;
|
||||
justify-content: var(--primary-nav--justify-content);
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -53,9 +53,9 @@ $site-branding-height: 68px;
|
|||
|
||||
@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
|
||||
.primary-menu-container {
|
||||
background: var(--primary-nav--color-background);
|
||||
/*background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
top: $site-branding-height;
|
||||
top: $site-branding-height;*/
|
||||
|
||||
.admin-bar & {
|
||||
top: $site-branding-height + $admin-bar-height;
|
||||
|
|
|
@ -7,5 +7,6 @@
|
|||
--global--spacing-vertical: 35px;
|
||||
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
|
||||
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
|
||||
--wpadmin-bar--height: 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,20 @@ $navigation-max-break-point: 'laptop-only';
|
|||
|
||||
.primary-navigation,
|
||||
.woo-navigation {
|
||||
// Top-level Menu Item
|
||||
.primary-menu-container > ul > .menu-item {
|
||||
padding: 0;
|
||||
|
||||
@include media( $navigation-min-break-point ) {
|
||||
padding: 0 var(--primary-nav--padding);
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
@include media( $navigation-min-break-point ) {
|
||||
padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding) );
|
||||
|
@ -21,3 +35,20 @@ $navigation-max-break-point: 'laptop-only';
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-navigation > div {
|
||||
ul li {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation-open .extra-navigation-wrapper {
|
||||
background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: 50px; // TODO adjust with admin bad
|
||||
right: 0;
|
||||
bottom: 30px; //Not sure why this div is offset by 30px
|
||||
left: 0;
|
||||
}
|
||||
|
|
121
spearhead/header.php
Normal file
121
spearhead/header.php
Normal file
|
@ -0,0 +1,121 @@
|
|||
<?php
|
||||
/**
|
||||
* The header for our theme
|
||||
*
|
||||
* This is the template that displays all of the <head> section and everything up until <div id="content">
|
||||
*
|
||||
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
||||
*
|
||||
* @package Seedlet
|
||||
* @since 1.0.0
|
||||
*/
|
||||
?><!doctype html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="profile" href="https://gmpg.org/xfn/11" />
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
<?php wp_body_open(); ?>
|
||||
<div id="page" class="site">
|
||||
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
|
||||
|
||||
<header id="masthead" class="site-header default-max-width" role="banner">
|
||||
<?php get_template_part( 'template-parts/header/site-branding' ); ?>
|
||||
|
||||
<?php if ( has_nav_menu( 'primary' ) ) : ?>
|
||||
<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
|
||||
<button id="primary-close-menu" class="button close">
|
||||
<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
|
||||
<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
|
||||
</button>
|
||||
<div class="extra-navigation-wrapper">
|
||||
<?php
|
||||
// Get menu slug
|
||||
$location_name = 'primary';
|
||||
$locations = get_nav_menu_locations();
|
||||
$menu_id = $locations[ $location_name ];
|
||||
$menu_obj = wp_get_nav_menu_object( $menu_id );
|
||||
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_class' => 'menu-wrapper',
|
||||
'container_class' => 'primary-menu-container',
|
||||
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
|
||||
)
|
||||
);
|
||||
?>
|
||||
<?php if ( has_nav_menu( 'social' ) ) : ?>
|
||||
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'seedlet' ); ?>">
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'social',
|
||||
'link_before' => '<span class="screen-reader-text">',
|
||||
'link_after' => '</span>' . seedlet_get_icon_svg( 'link' ),
|
||||
'depth' => 1,
|
||||
)
|
||||
);
|
||||
?>
|
||||
</nav><!-- .social-navigation -->
|
||||
<?php endif; ?>
|
||||
</div><!-- .extra-navigation-wrapper -->
|
||||
</nav><!-- #site-navigation -->
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="menu-button-container">
|
||||
<?php if ( has_nav_menu( 'primary' ) ) : ?>
|
||||
<button id="primary-open-menu" class="button open">
|
||||
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
|
||||
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ( class_exists( 'WooCommerce' ) ) : ?>
|
||||
<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
|
||||
<?php
|
||||
echo( sprintf(
|
||||
'<button id="woo-close-menu" class="button close">
|
||||
<span class="dropdown-icon close">%1$s %2$s</span>
|
||||
<span class="hide-visually collapsed-text">%3$s</span>
|
||||
</button>
|
||||
<div class="woocommerce-menu-container">
|
||||
<ul id="woocommerce-menu" class="menu-wrapper"">
|
||||
<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
|
||||
%6$s
|
||||
<ul class="sub-menu">
|
||||
<li class="woocommerce-cart-widget" title="%7$s">
|
||||
%8$s
|
||||
</li>
|
||||
</ul>
|
||||
</li>',
|
||||
esc_html__( 'Close', 'seedlet' ),
|
||||
seedlet_get_icon_svg( 'close' ),
|
||||
esc_html__( 'collapsed', 'seedlet' ),
|
||||
is_cart() ? 'current-menu-item' : '',
|
||||
esc_attr__( 'View your shopping cart', 'seedlet' ),
|
||||
seedlet_cart_link(),
|
||||
esc_attr__( 'View your shopping list', 'seedlet' ),
|
||||
seedlet_cart_widget()
|
||||
) );
|
||||
?>
|
||||
</nav><!-- .woo-navigation -->
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="menu-button-container">
|
||||
<?php if ( class_exists( 'WooCommerce' ) ) : ?>
|
||||
<button id="woo-open-menu" class="button open">
|
||||
<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
|
||||
<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ); ?></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</header><!-- #masthead -->
|
||||
|
||||
<div id="content" class="site-content">
|
|
@ -290,8 +290,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul,
|
||||
.woo-navigation > div > ul {
|
||||
.primary-navigation div > ul,
|
||||
.woo-navigation div > ul {
|
||||
display: flex;
|
||||
justify-content: var(--primary-nav--justify-content);
|
||||
flex-wrap: wrap;
|
||||
|
@ -303,55 +303,55 @@
|
|||
/* Sub-menus Flyout */
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul ul,
|
||||
.woo-navigation > div > ul ul {
|
||||
.primary-navigation div > ul ul,
|
||||
.woo-navigation div > ul ul {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
|
||||
.woo-navigation > div > ul li:hover,
|
||||
.woo-navigation > div > ul li:focus-within {
|
||||
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
|
||||
.woo-navigation div > ul li:hover,
|
||||
.woo-navigation div > ul li:focus-within {
|
||||
cursor: pointer;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: inherit;
|
||||
width: inherit;
|
||||
/* Submenu display */
|
||||
}
|
||||
.primary-navigation > div > ul li:hover > ul,
|
||||
.primary-navigation > div > ul li:focus-within > ul,
|
||||
.primary-navigation > div > ul li ul:hover,
|
||||
.primary-navigation > div > ul li ul:focus,
|
||||
.woo-navigation > div > ul li:hover > ul,
|
||||
.woo-navigation > div > ul li:focus-within > ul,
|
||||
.woo-navigation > div > ul li ul:hover,
|
||||
.woo-navigation > div > ul li ul:focus {
|
||||
.primary-navigation div > ul li:hover > ul,
|
||||
.primary-navigation div > ul li:focus-within > ul,
|
||||
.primary-navigation div > ul li ul:hover,
|
||||
.primary-navigation div > ul li ul:focus,
|
||||
.woo-navigation div > ul li:hover > ul,
|
||||
.woo-navigation div > ul li:focus-within > ul,
|
||||
.woo-navigation div > ul li ul:hover,
|
||||
.woo-navigation div > ul li ul:focus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
background: var(--global--color-background);
|
||||
box-shadow: var(--global--elevation);
|
||||
|
@ -365,8 +365,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu .sub-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -524,6 +524,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item {
|
||||
padding: 0 var(--primary-nav--padding);
|
||||
}
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation .sub-menu,
|
||||
.woo-navigation .sub-menu {
|
||||
|
@ -533,4 +549,19 @@
|
|||
.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
|
||||
padding: calc(0.5 * var(--primary-nav--padding)) 0 0 calc( 2 * var(--primary-nav--padding));
|
||||
}
|
||||
}
|
||||
|
||||
.social-navigation > div ul li {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.primary-navigation-open .extra-navigation-wrapper {
|
||||
background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
}
|
|
@ -290,8 +290,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul,
|
||||
.woo-navigation > div > ul {
|
||||
.primary-navigation div > ul,
|
||||
.woo-navigation div > ul {
|
||||
display: flex;
|
||||
justify-content: var(--primary-nav--justify-content);
|
||||
flex-wrap: wrap;
|
||||
|
@ -303,55 +303,55 @@
|
|||
/* Sub-menus Flyout */
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul ul,
|
||||
.woo-navigation > div > ul ul {
|
||||
.primary-navigation div > ul ul,
|
||||
.woo-navigation div > ul ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
|
||||
.woo-navigation > div > ul li:hover,
|
||||
.woo-navigation > div > ul li:focus-within {
|
||||
.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
|
||||
.woo-navigation div > ul li:hover,
|
||||
.woo-navigation div > ul li:focus-within {
|
||||
cursor: pointer;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation > div > ul li,
|
||||
.woo-navigation > div > ul li {
|
||||
.primary-navigation div > ul li,
|
||||
.woo-navigation div > ul li {
|
||||
display: inherit;
|
||||
width: inherit;
|
||||
/* Submenu display */
|
||||
}
|
||||
.primary-navigation > div > ul li:hover > ul,
|
||||
.primary-navigation > div > ul li:focus-within > ul,
|
||||
.primary-navigation > div > ul li ul:hover,
|
||||
.primary-navigation > div > ul li ul:focus,
|
||||
.woo-navigation > div > ul li:hover > ul,
|
||||
.woo-navigation > div > ul li:focus-within > ul,
|
||||
.woo-navigation > div > ul li ul:hover,
|
||||
.woo-navigation > div > ul li ul:focus {
|
||||
.primary-navigation div > ul li:hover > ul,
|
||||
.primary-navigation div > ul li:focus-within > ul,
|
||||
.primary-navigation div > ul li ul:hover,
|
||||
.primary-navigation div > ul li ul:focus,
|
||||
.woo-navigation div > ul li:hover > ul,
|
||||
.woo-navigation div > ul li:focus-within > ul,
|
||||
.woo-navigation div > ul li ul:hover,
|
||||
.woo-navigation div > ul li ul:focus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation > div > ul > li > .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu {
|
||||
margin: 0;
|
||||
background: var(--global--color-background);
|
||||
box-shadow: var(--global--elevation);
|
||||
|
@ -365,8 +365,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation > div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation > div > ul > li > .sub-menu .sub-menu {
|
||||
.primary-navigation div > ul > li > .sub-menu .sub-menu,
|
||||
.woo-navigation div > ul > li > .sub-menu .sub-menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -524,6 +524,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item {
|
||||
padding: 0 var(--primary-nav--padding);
|
||||
}
|
||||
.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
|
||||
.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 830px) {
|
||||
.primary-navigation .sub-menu,
|
||||
.woo-navigation .sub-menu {
|
||||
|
@ -535,4 +551,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.social-navigation > div ul li {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.primary-navigation-open .extra-navigation-wrapper {
|
||||
background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=navigation.css.map */
|
File diff suppressed because one or more lines are too long
|
@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
|
|||
--global--spacing-vertical: 35px;
|
||||
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
|
||||
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
|
||||
--wpadmin-bar--height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
|
|||
|
||||
@media only screen and (max-width: 829px) {
|
||||
.site-header .primary-navigation .primary-menu-container {
|
||||
background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
top: 68px;
|
||||
/*background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
top: $site-branding-height;*/
|
||||
}
|
||||
.admin-bar .site-header .primary-navigation .primary-menu-container {
|
||||
top: 114px;
|
||||
|
|
|
@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
|
|||
--global--spacing-vertical: 35px;
|
||||
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
|
||||
--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
|
||||
--wpadmin-bar--height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
|
|||
|
||||
@media only screen and (max-width: 829px) {
|
||||
.site-header .primary-navigation .primary-menu-container {
|
||||
background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
top: 68px;
|
||||
/*background: var(--primary-nav--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
top: $site-branding-height;*/
|
||||
}
|
||||
.admin-bar .site-header .primary-navigation .primary-menu-container {
|
||||
top: 114px;
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue