Pārlūkot izejas kodu

Adds sticky header.

Jeffrey Pearce 6 gadi atpakaļ
vecāks
revīzija
2450c66b32
2 mainītis faili ar 112 papildinājumiem un 28 dzēšanām
  1. 61 0
      stratford/header.php
  2. 51 28
      stratford/sass/_extra-child-theme.scss

+ 61 - 0
stratford/header.php

@@ -0,0 +1,61 @@
+<?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 WordPress
+ * @subpackage Stratford
+ * @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(); ?>>
+<div id="page" class="site">
+	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'varia' ); ?></a>
+
+		<header id="masthead" class="site-header alignfull">
+			
+			<div class="site-header-wrapper">
+				
+				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
+			
+				
+				<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+				<div id="site-menu" class="site-menu">
+					<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
+						<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
+						<label for="toggle" id="toggle-menu" class="button">
+							<?php _e( 'Menu', 'varia' ); ?>
+							<span class="dropdown-icon open">+</span>
+							<span class="dropdown-icon close">&times;</span>
+							<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
+							<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
+						</label>
+						<?php
+						wp_nav_menu(
+							array(
+								'theme_location' => 'menu-1',
+								'menu_class'     => 'main-menu',
+								'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
+							)
+						);
+						?>
+					</nav><!-- #site-navigation -->
+				</div><!-- .site-menu -->
+				<?php endif; ?>
+				
+			</div>
+
+		</header><!-- #masthead -->
+
+	<div id="content" class="site-content">

+ 51 - 28
stratford/sass/_extra-child-theme.scss

@@ -3,36 +3,59 @@
  */
 // @import "";
 
-a {
-	text-decoration: none;
-}
-
-.site-branding,
-.site-info,
-.main-navigation,
-.entry-header,
-.entry-footer,
-.page-title,
-.author-title,
-.comments-title,
-.comment-reply-title {
-	text-align: center;
-}
+$color_background: map-deep-get($config-global, "color", "background", "default");
+$color_primary: map-deep-get($config-global, "color", "primary", "default");
+$color_primary_hover: map-deep-get($config-global, "color", "primary", "hover");
+$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
+$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
 
-.main-navigation > div {
-	text-align: left;
+// Main Menu
+#masthead {
+	border-bottom: 1px solid #f3f3f3;
+	position: fixed;
+	z-index: 9999;
+	background: #fff;
+	width: 100%;
+	-webkit-transition: all .25s ease-in-out;
+    -moz-transition: all .25s ease-in-out;
+    transition: all .25s ease-in-out;
 }
 
-.comment-reply-title {
-	display: inherit;
-}
-
-.comment .comment-reply-title {
+.site-header-wrapper {
 	display: flex;
-}
-
-.main-navigation > div > ul,
-.social-navigation > div > ul,
-.pagination .nav-links {
-	justify-content: center;
+	flex-wrap: wrap;	
+	position: relative;
+	z-index: 1;
+	-webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: calc(100% - 1.5em);
+	.site-branding {
+		-webkit-transition: margin-top .25s ease-in-out;
+		-moz-transition: margin-top .25s ease-in-out;
+		transition: margin-top .25s ease-in-out;
+		margin-left: 1.5em;
+		margin-right: auto;
+		.site-description {
+			display: none;
+		}
+	}
+	.site-menu {
+		display: block;
+		-webkit-flex: 0 1 auto;
+		-ms-flex: 0 1 auto;
+		flex: 0 1 auto;
+	}
+	.main-navigation {
+		ul {
+			li {
+				&:hover {
+					ul {
+						left: auto;
+						right: 0;
+					}
+				}
+			}
+		}
+	}
 }