Topbar testing

styles/components/_portfolio_layout.scss

@@ -3,11 +3,6 @@
     @include grid-row;
     min-height: 500px;
   }
-
-  .col.col--grow {
-    position: relative;
-    padding: 0;
-  }
 }
 
 .portfolio-header {
@@ -25,12 +20,6 @@
 
   &__name {
     @include h1;
-    padding-right: $spacing-medium;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    -webkit-transform: translateX(0%) translateY(-50%);
-    transform: translateX(0%) translateY(-50%);
 
     h1 {
       margin: 0;

styles/components/_topbar.scss

@@ -65,3 +65,11 @@
     justify-content: flex-end;
   }
 }
+
+.login-topbar .topbar__navigation {
+    max-width: 100%;
+}
+
+.login-topbar .topbar__context .topbar__link-icon {
+    margin: 0 0 0 0.8rem;
+}

styles/core/_util.scss

@@ -94,3 +94,7 @@ hr {
     margin: ($gap * 3) ($site-margins * -4);
   }
 }
+
+.usa-section {
+  padding: 0;
+}

templates/base_public.html

@@ -17,7 +17,7 @@
 <div id='app-root'>
   {% include 'components/usa_header.html' %}
 
-  {% include 'navigation/topbar.html' %}
+  <div class='login-topbar'>{% include 'navigation/topbar.html' %}</div>
 
   {% block content %}{% endblock %}
 

templates/portfolios/new/step_1.html

@@ -10,9 +10,11 @@
 
 <main class="usa-section usa-content">
   {% include "fragments/flash.html" %}
-  <div class='portfolio-header__name'>
-    <p>{{ "portfolios.header" | translate }}</p>
-    <h1>{{ "New Portfolio" }}</h1>
+  <div class="portfolio-header-new">
+    <div class='portfolio-header__name'>
+      <p>{{ "portfolios.header" | translate }}</p>
+      <h1>{{ "New Portfolio" }}</h1>
+    </div>
   </div>
   {{ StickyCTA(text="Create New Portfolio") }}
   <base-form inline-template>