fixed the header to be a better fit and updated the css

Kerry-G · Mar 22, 2018 · e4fb407 · e4fb407
1 parent 0097c7e
commit e4fb407
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 64 deletions.
diff --git a/static/src/components/header/Header.js b/static/src/components/header/Header.js
@@ -9,23 +9,21 @@ class Header extends Component {
   render() {
     let image = "\\images\\ask-eng.png"
     return (
-      <Row className="header">
-        <Col xs={9} lg={7} md={7}>
-          <h1>
-            <Link to='/' style={{ textDecoration: 'none', color: "#E27A3F" }}>
-              <Image src={image} width={30} circle />&nbsp;Ask<small>ENG</small>
-            </Link>    
-          </h1>
-        </Col>
-        <Col xs={3} lg={5} md={5}>
+      <div className="header">
+
+        <h1>
+          <Link to='/' style={{ textDecoration: 'none', color: "#E27A3F" }}>
+            <img src={image} width={30} circle />&nbsp;Ask<small>ENG</small>
+          </Link>
+        </h1>
+
           <div className ="menu">
-            <Col style={{float: "right"}}>
               <Headermenu
-              user = {this.props.user}/>
-            </Col>
+                user = {this.props.user}
+              />
           </div>  
-        </Col>
-      </Row>
+
+      </div>
     );
   }
 }

diff --git a/static/src/styles.css b/static/src/styles.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Mukta+Mahee");
-/* xsmall:     (max-width: 479px),
+/* xsmall:  (max-width: 479px),
 small:      (max-width: 599px),
 medium:     (max-width: 767px),
 large:      (max-width: 1024px),
@@ -22,10 +22,12 @@ h1 {
 .header {
   margin: 0 0 25px;
   background: #ecf0f1;
-  box-shadow: 0 2px 12px 1px rgba(127, 140, 141, 0.6); }
+  box-shadow: 0 2px 12px 1px rgba(127, 140, 141, 0.6);
+  display: flex;
+  justify-content: space-between; }
 
 .header h1 {
-  font-size: 5rem;
+  font-size: 3rem;
   color: #E27A3F;
   font-weight: 600; }
 
@@ -43,15 +45,6 @@ h1 {
 .para {
   margin-top: 1.5rem; }
 
-.menu .btn-toolbar {
-  display: inline-block;
-  vertical-align: middle;
-  margin: auto 1rem; }
-
-.menu {
-  margin-top: 1.5rem;
-  float: right; }
-
 /* END HEADER */
 .jumbotron {
   background-color: #95a5a6; }
@@ -165,10 +158,6 @@ h1 {
 .modal-content {
   border: 0; }
 
-.menu {
-  float: left;
-  width: 100%; }
-
 label {
   font-weight: 300; }
 
@@ -412,23 +401,6 @@ textarea {
 /*===============================
 START SEARCH
 =================================*/
-.search {
-  position: relative;
-  float: right;
-  width: 20rem;
-  transition: all 10s; }
-  .search:focus {
-    outline: none; }
-
-#searchButton {
-  float: right;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 10px;
-  padding-left: 5px;
-  text-align: left; }
-
 /*==========================================
 END SEARCH
 ============================================*/

diff --git a/static/src/styles.scss b/static/src/styles.scss
@@ -39,16 +39,22 @@ h1{
     margin: 0 0 25px;
     background:$offwhite;
     box-shadow: 0 2px 12px 1px rgba(127,140,141,0.6);
+    display:flex;
+    justify-content: space-between;
 }
 .header h1{
-    font-size: 5rem;
+    font-size: 3rem;
     color:$main;
     font-weight: 600;
 }
 .header h1 small{
-    color:$main;;
+    color:$main;
 }
-
+// .menu .btn-toolbar{
+//     display: inline-block;
+//     vertical-align: middle;
+//     margin: auto 1rem;
+// }
 .logoutBtn{
     color: #ffffff;
     cursor: pointer;
@@ -60,16 +66,6 @@ h1{
 .para{
     margin-top: 1.5rem;
 }
-.menu .btn-toolbar{
-    display: inline-block;
-        vertical-align: middle;
-        margin: auto 1rem;
-
-}
-.menu {
-    margin-top: 1.5rem;
-    float: right; 
-}
 /* END HEADER */
 .jumbotron{
     background-color: $gray;
@@ -182,10 +178,6 @@ h1{
 .modal-content{
     border: 0;
 }
-.menu{ 
-    float: left;
-    width: 100%;  
-}
 label{
     font-weight: 300;
 }