styled menus and header for small medium and large screens

functions.php

@@ -46,7 +46,7 @@ function ofisuport_setup() {
 		*/
 	add_theme_support( 'post-thumbnails' );
 
-	// This theme uses wp_nav_menu() in one location.
+	// This theme uses wp_nav_menu()
 	register_nav_menus(
 		array(
 			'menu-1' => esc_html__( 'Primary', 'ofisuport' ),

header.php

@@ -61,6 +61,7 @@
 		<div class="secondary">
       <?php the_header_image_tag(); ?>
 		  <nav id="site-navigation" class="secondary-navigation">
+	  		<button class="menu-toggle" aria-controls="secondary-menu" aria-expanded="false"><?php esc_html_e( 'Secondary Menu', 'ofisuport' ); ?></button>
 		  	<?php
 		  	wp_nav_menu(
 		  		array(

sass/components/navigation/_navigation.scss

@@ -1,7 +1,10 @@
-.main-navigation,.secondary-navigation {
-	//display: block;
-	//width: 100%;
 
+@media screen {
+	.custom-logo {
+		min-width: 11rem;
+		margin: 1rem;
+	}
+	.main-navigation,.secondary-navigation {
 		ul {
 			display: none;
 			list-style: none;
@@ -61,7 +64,7 @@
 			display: flex;
 			align-items: center;
 			min-height: 100%;
-		padding: 0 1rem;
+			padding: 0 0.5rem;
 			text-decoration: none;
 			font-size: 1rem;
 		}
@@ -72,6 +75,9 @@
 		.current-menu-ancestor > a {
 			font-weight: bold;
 		}
+	}
+
+	.main-navigation {
 		.current-menu-item::after {
 			border-bottom: 2px solid #000;
 			display: block;
@@ -80,9 +86,6 @@
 			margin: 0 20%;
 		}
 	}
-
-.main-navigation {
-}
 	.secondary-navigation {
 		padding: 1.5rem 0;
 		a {
@@ -94,35 +97,32 @@
 	.main-navigation.toggled ul {
 		display: block;
 	}
-
+}
-@media screen and (min-width: 37.5em) {
+@media screen and (min-width: 48em) {
 	.site-branding {
-   //display: inline-block;
-   //float: left;
 	}
 	.custom-logo {
-    width: 11rem;
+		min-width: 11rem;
-    margin: 1rem;
+		margin: 1rem 1rem 1rem 0;
 	}
-  //.menu-primary-menu-container {
-	//	height: 100%;
-	//}
-  //.menu-primary-menu-container,
-  //.menu-secondary-menu-container {
-  //  display: flex;
-  //  justify-content: end;
-  //}
 	.menu-toggle {
 		display: none;
 	}
 
-	.main-navigation ul {
+	.main-navigation,.secondary-navigation {
+		ul {
 			display: flex;
-		justify-content: end;
-		//height:100%;
 		}
-  .secondary-navigation ul  {
+		a {
-  	display: flex;
+			padding: 0 0.5rem;
+		}
+	}
+	.main-navigation { 
+		ul {
+			justify-content: end;
+		}
+	}
+	.secondary-navigation {
 	}
 }
 
@@ -147,3 +147,10 @@
 		flex: 1 0 50%;
 	}
 }
+@media screen and (min-width: 80em) {
+	.main-navigation,.secondary-navigation {
+		a {
+			padding: 0 1rem;
+		}
+	}
+}

sass/layouts/_no-sidebar.scss

@@ -1,3 +1,4 @@
+@media screen {
 	.no-sidebar {
 		.site {
 			display: grid;
@@ -12,11 +13,21 @@
 		}
 		.site-header {
 			.main {
-		  //display: grid;
-      //grid-template-columns: 1fr 4fr;i
 				display: flex;
+				flex-flow: column;
 				align-items: center;
-			justify-content: space-between;
+			}
+			.secondary {
+			}
+		}
+	}
+}
+@media screen and (min-width: 48em) {
+	.no-sidebar {
+		.site {
+		}
+		.site-header {
+			.main {
 				border-bottom: 1px solid $color__grey-lighter;
 			}
 			.secondary {
@@ -25,3 +36,19 @@
 			}
 		}
 	}
+}
+@media screen and (min-width: 80em) {
+	.no-sidebar {
+		.site {
+		}
+		.site-header {
+			.main {
+				flex-flow: row;
+				align-items: center;
+				justify-content: space-between;
+			}
+			.secondary {
+			}
+		}
+	}
+}

style.css

@@ -713,6 +713,7 @@ textarea {
 /*--------------------------------------------------------------
 # Layouts
 --------------------------------------------------------------*/
+@media screen {
 	.no-sidebar .site {
 		display: grid;
 		grid-template-columns: auto;
@@ -721,31 +722,47 @@ textarea {
 		padding: 0 3rem;
 		max-width: 80em;
 	}
-
 	.no-sidebar .site-header .main {
 		display: flex;
+		flex-flow: column;
 		align-items: center;
-	justify-content: space-between;
+	}
-	border-bottom: 1px solid #eee;
 }
 
+@media screen and (min-width: 48em) {
+	.no-sidebar .site-header .main {
+		border-bottom: 1px solid #eee;
+	}
 	.no-sidebar .site-header .secondary {
 		display: flex;
 		justify-content: center;
 	}
+}
+
+@media screen and (min-width: 80em) {
+	.no-sidebar .site-header .main {
+		flex-flow: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+}
 
 /*--------------------------------------------------------------
 # Components
 --------------------------------------------------------------*/
 /* Navigation
 --------------------------------------------- */
+@media screen {
+	.custom-logo {
+		min-width: 11rem;
+		margin: 1rem;
+	}
 	.main-navigation ul, .secondary-navigation ul {
 		display: none;
 		list-style: none;
 		margin: 0;
 		padding-left: 0;
 	}
-
 	.main-navigation ul ul, .secondary-navigation ul ul {
 		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 		float: left;
@@ -754,42 +771,35 @@ textarea {
 		left: -999em;
 		z-index: 99999;
 	}
-
 	.main-navigation ul ul ul, .secondary-navigation ul ul ul {
 		left: -999em;
 		top: 0;
 	}
-
 	.main-navigation ul ul li:hover > ul,
 	.main-navigation ul ul li.focus > ul, .secondary-navigation ul ul li:hover > ul,
 	.secondary-navigation ul ul li.focus > ul {
 		display: block;
 		left: auto;
 	}
-
 	.main-navigation ul ul a, .secondary-navigation ul ul a {
 		width: 200px;
 	}
-
 	.main-navigation ul li:hover > ul,
 	.main-navigation ul li.focus > ul, .secondary-navigation ul li:hover > ul,
 	.secondary-navigation ul li.focus > ul {
 		left: auto;
 	}
-
 	.main-navigation li, .secondary-navigation li {
 		position: relative;
 	}
-
 	.main-navigation a, .secondary-navigation a {
 		display: flex;
 		align-items: center;
 		min-height: 100%;
-	padding: 0 1rem;
+		padding: 0 0.5rem;
 		text-decoration: none;
 		font-size: 1rem;
 	}
-
 	.main-navigation .current_page_item > a,
 	.main-navigation .current-menu-item > a,
 	.main-navigation .current_page_ancestor > a,
@@ -799,43 +809,42 @@ textarea {
 	.secondary-navigation .current-menu-ancestor > a {
 		font-weight: bold;
 	}
-
+	.main-navigation .current-menu-item::after {
-.main-navigation .current-menu-item::after, .secondary-navigation .current-menu-item::after {
 		border-bottom: 2px solid #000;
 		display: block;
 		content: "";
 		width: 60%;
 		margin: 0 20%;
 	}
-
 	.secondary-navigation {
 		padding: 1.5rem 0;
 	}
-
 	.secondary-navigation a {
 		text-transform: uppercase;
 	}
-
 	/* Small menu. */
 	.menu-toggle,
 	.main-navigation.toggled ul {
 		display: block;
 	}
+}
 
-@media screen and (min-width: 37.5em) {
+@media screen and (min-width: 48em) {
 	.custom-logo {
-		width: 11rem;
+		min-width: 11rem;
-		margin: 1rem;
+		margin: 1rem 1rem 1rem 0;
 	}
 	.menu-toggle {
 		display: none;
 	}
-	.main-navigation ul {
+	.main-navigation ul, .secondary-navigation ul {
 		display: flex;
-		justify-content: end;
 	}
-	.secondary-navigation ul {
+	.main-navigation a, .secondary-navigation a {
-		display: flex;
+		padding: 0 0.5rem;
+	}
+	.main-navigation ul {
+		justify-content: end;
 	}
 }
 
@@ -864,6 +873,12 @@ textarea {
 	flex: 1 0 50%;
 }
 
+@media screen and (min-width: 80em) {
+	.main-navigation a, .secondary-navigation a {
+		padding: 0 1rem;
+	}
+}
+
 /* Posts and pages
 --------------------------------------------- */
 .sticky {