Merge pull request #572 from CuBoulder/issue/558

Fixes secondary menu alignment

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Fixes secondary menu alignment
+  Fixes a bug which caused the secondary menu to be improperly aligned to the left when placed above the main navigation. Resolves CuBoulder/tiamat-theme#558
+---
+
 - ### People List Filter Labels as a Global Setting
   Changes the People List `Filter 1`, `Filter 2`, and `Filter 3` custom labels to a Global Setting in Site Configuration, rather than being set per-page. These labels will be set under Configuration => Cu Boulder Site Settings => Appearance and Layout.
 

css/ucb-secondary-menu-region.css

@@ -1,78 +1,79 @@
 .ucb-secondary-menu-region {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .ucb-secondary-menu-region .ucb-menu {
-	display: flex;
-	flex-direction: row;
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-inline {
-	justify-content: space-between;
+  justify-content: space-between;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above {
-	flex-direction: column-reverse;
-	align-items: stretch;
+  flex-direction: column-reverse;
+  align-items: stretch;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region {
-	background-color: #272727;
+  background-color: #272727;
 }
 
 .ucb-secondary-menu-region .ucb-secondary-menu-region-container {
-	display: flex;
-	flex-direction: row;
-	justify-content: right;
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-inline .ucb-secondary-menu-region .ucb-secondary-menu-region-container, .ucb-main-nav-continer.ucb-secondary-menu-position-inline .ucb-secondary-menu-region .ucb-menu {
-	gap: .5rem;
+  gap: .5rem;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region ≈, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu {
-	gap: 1.5rem;
+  gap: 1.5rem;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-inline .ucb-secondary-menu-region .menu-item a {
-	margin: .25rem 0;
+  margin: .25rem 0;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .menu-item a {
-	color: #FFF;
-	line-height: 1rem;
-	margin: 0;
-	padding: .5rem 0;
+  color: #FFF;
+  line-height: 1rem;
+  margin: 0;
+  padding: .5rem 0;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .menu-item a:hover {
-	color: var(--ucb-gold);
-	background-color: transparent;
+  color: var(--ucb-gold);
+  background-color: transparent;
 }
 
 .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container .menu-item a {
-	color: #000000;
-	background-color: var(--ucb-gold);
-	border-radius: 4px;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-	transition: box-shadow .5s ease, background-color .5s;
-	margin: .5rem 0;
-	padding: .3rem .9rem;
+  color: #000000;
+  background-color: var(--ucb-gold);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+  transition: box-shadow .5s ease, background-color .5s;
+  margin: .5rem 0;
+  padding: .3rem .9rem;
 }
 
 .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container .ucb-menu {
-	gap: .5rem;
+  gap: .5rem;
 }
 
 .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container .menu-item a:hover {
-	color: #000000;
-	background-color: #a6a6a6;
-	box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
+  color: #000000;
+  background-color: #a6a6a6;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
 }
 
 .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container .menu-item a:active, .ucb-secondary-menu-region.ucb-secondary-menu-button-display .ucb-secondary-menu-region-container .menu-item a:focus {
-	color: #000000;
-	background-color: #a6a6a6;
-	box-shadow: 0 3px 15px rgba(0, 0, 0, .35);
+  color: #000000;
+  background-color: #a6a6a6;
+  box-shadow: 0 3px 15px rgba(0, 0, 0, .35);
 }

templates/regions/region--secondary-menu.html.twig

@@ -14,7 +14,7 @@
 #}
 {{ attach_library('boulder_base/ucb-secondary-menu-region') }}
 <div id = "ucb-secondary-menu-region" class="ucb-secondary-menu-region{{ ucb_secondary_menu_button_display ? ' ucb-secondary-menu-button-display' : ''}}">
-  <div  class="ucb-secondary-menu-region-container{{ ucb_secondary_menu_position == 'above' ? ' container' : ''}}">
+  <div class="ucb-secondary-menu-region-container{{ ucb_secondary_menu_position == 'above' ? ' container' : ''}}">
     {% if ucb_secondary_menu_default_links %}{% include "@boulder_base/includes/ucb-header-secondary-menu.html.twig" %}{% endif %}
     {{ content }}
   </div>