fixed subnavbar in top

src/client/js/components/Navbar/GrowiCompactSubNavigation.jsx

@@ -17,7 +17,6 @@ import ReducedRevisionAuthor from './ReducedRevisionAuthor';
 // import RevisionAuthor from './RevisionAuthor';
 
 const GrowiCompactSubNavigation = (props) => {
-  // const isPageForbidden = document.querySelector('#grw-compactsubnav').getAttribute('data-is-forbidden-page');
   const { appContainer, pageContainer } = props;
   const {
     path, createdAt, creator, updatedAt, revisionAuthor,
@@ -28,7 +27,7 @@ const GrowiCompactSubNavigation = (props) => {
   // window.addEventListener('scroll', () => {
   //   if (isVisible) {
   return (
-    <div className="d-flex align-items-center fixed-top grw-compactsubnavbar-color">
+    <div className="d-flex align-items-center fixed-top grw-compactsubnavbar-color px-3">
 
       {/* Page Path */}
       <div className="title-container mr-auto">

src/client/js/components/Page/RevisionPath.jsx

@@ -152,7 +152,7 @@ class RevisionPath extends React.Component {
     });
 
     return (
-      <span className="d-flex align-items-center">
+      <span className="d-flex align-items-center flex-wrap">
 
         {rootElement}
         {afterElements}

src/client/styles/scss/_page_growi.scss

@@ -22,6 +22,20 @@
     }
     .grw-compactsubnavbar-color {
       background-color: rgba(250, 250, 250, 0.9);
+      box-shadow: 0 0 2px #999;
+      h2 {
+        font-size: 20px;
+        line-height: 1.1em;
+        @include media-breakpoint-down(md) {
+          font-size: 18px;
+        }
+        @include media-breakpoint-down(sm) {
+          font-size: 14px;
+        }
+        @include media-breakpoint-down(xs) {
+          font-size: 12px;
+        }
+      }
     }
   }
 }