Add trial banner styles

app/assets/stylesheets/framework/header.scss

@@ -55,6 +55,10 @@ header {
       }
     }
 
+    &.has-trial-banner {
+      top: 50px;
+    }
+
     .container-fluid {
       width: 100% !important;
       filter: none;
@@ -314,6 +318,29 @@ header {
   }
 }
 
+.gitlab-ee-trial-banner {
+  padding: 15px;
+  text-align: center;
+
+  p {
+    margin: 0;
+    display: inline-block;
+
+    a {
+      font-weight: bold;
+    }
+  }
+
+  .close-trial-banner {
+    float: right;
+    margin-top: 2px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   header .container-fluid {
     font-size: 18px;

app/views/layouts/header/_default.html.haml

-%header.navbar.navbar-gitlab{ class: nav_header_class }
+- if license_message.present?
+  .gitlab-ee-trial-banner
+    %p= license_message
+    %button.btn.btn-default.close.close-trial-banner.js-close-trial-banner{ type: 'button', 'aria-label' => 'Dismiss banner' }
+      = icon('times', 'aria-hidden' => 'true')
+%header.navbar.navbar-gitlab{ class: "#{nav_header_class} #{ 'has-trial-banner' if trial_license_message.present?}" }
   .navbar-border
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
-    - if current_license&.trial? && license_message.present?
-      %p.text-center= license_message
     .header-content
       .dropdown.global-dropdown
         %button.global-dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }