Merge pull request #90 from NumanAnees/fix/sticky-navbar

sticky navbar

Author: yochannah

src/components/Navigation.js

@@ -13,6 +13,7 @@ function Navigation() {
       bg='light'
       variant='light'
       style={{ paddingLeft: '30px', paddingRight: '30px' }}
+      fixed="top"
     >
       <Navbar.Brand href='#home'>
         <img src={Logo} alt='' srcSet='' height={81} width={150} />

src/pages/Contact.js

@@ -6,7 +6,7 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 import { FaGitter } from 'react-icons/fa';
 
 const Contact = () => (
-  <Container>
+  <Container  className='contact-padding'>
     <h1>Contact Us</h1>
     <p>Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:</p>
     <Row className='contact-card-one'>

src/pages/Home.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import Header from '../components/Header';
 import LandingSection from '../components/LandingSection';
+import "../styles/Header.css"
 
 function Home() {
   return (
-    <>
-      <Header />
+    <div className='header-padding'>
+       <Header />
       <LandingSection />
-    </>
+    </div>
   );
 }
 

src/pages/Journal.js

@@ -2,11 +2,12 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import { Col, Row, Container, Table } from 'react-bootstrap';
+import "../styles/Journal.css"
 
 import AddJournal from '../components/AddJournal';
 
 const Journal = () => (
-  <Container>
+  <Container className='journal-padding'>
     <h1>Journals</h1>
     <AddJournal />
   </Container>

src/pages/Login.js

@@ -60,7 +60,7 @@ class Login extends React.Component {
 
   render() {
     return (
-      <Row>
+      <Row className='login-padding'>
         <Col md={4} />
         <Col md={4}>
           <Form className='login-form'>

src/pages/Manifesto.js

@@ -14,7 +14,7 @@ import { ImTwitter, ImMail, ImGithub } from 'react-icons/im';
 
 const Manifesto = () => (
   <Container>
-    <Row className='manifesto-header'>
+    <Row className='manifesto-header manifesto-padding'>
       <Col xs={12} sm={12} md={3}>
         <Image src={StandingImg} height={220} />
       </Col>

src/pages/SignUp.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/function-component-definition */
 import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
+import "../styles/Signup.css"
 
 const SignUp = () => {
   const [details, setDetails] = useState({
@@ -22,7 +23,7 @@ const SignUp = () => {
   };
 
   return (
-    <Row>
+    <Row className='signup-padding'>
       <Col md={4} />
       <Col md={4}>
         <Form className='login-form' onSubmit={handleSubmit}>

src/styles/Contact.css

@@ -11,3 +11,6 @@
 .contact-form {
   margin-bottom: 4em;
 }
+.contact-padding{
+  padding-top: 8.7em;
+}

src/styles/Header.css

@@ -24,3 +24,6 @@
   margin-top: 20em;
   margin-left: calc(((100% - 270px) / 3) * 2);
 }
+.header-padding{
+  padding-top: 6.7em; 
+}

src/styles/Journal.css

@@ -0,0 +1,3 @@
+.journal-padding{
+    padding-top: 7em;
+}