collapse and mobile

src/components/header.js

@@ -1,11 +1,16 @@
+import React from "react"
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
-import React from "react"
 import logo from "../images/index/npm-logo-no-text.svg"
+
 import "../styles/header.css"
 import "../styles/bootstrap.min.css"
 
+import $ from "jquery/dist/jquery"
+import "bootstrap/dist/js/bootstrap"
+
 const Header = () => {
+
   let curActive = [' ', ' ', ' '];
   if (window.location.pathname === '/about'){curActive[0] = 'active';}  
   if (window.location.pathname === '/projects/physics' || window.location.pathname === '/projects/education' || window.location.pathname === '/projects/math' || window.location.pathname === '/projects/software'){curActive[1] = 'active';}  
@@ -13,18 +18,19 @@ const Header = () => {
   
   return (
   <header>
-  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <div class="navbar-header">
+          <button class="navbar-toggler" id="togglerButton" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
+      </div>
 
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <Link class="navbar-brand" to="/">
                   <img src={logo} height="40" class="d-inline-block" alt="mipt-npm"/>
               </Link>
               <ul class="navbar-nav">
-                  <li class="nav-item  active "><Link class="nav-link" to="./"><span class="glyphicon glyphicon-home"></span></Link></li>
                   <li class={`nav-item ${curActive[0]}`}><Link class="nav-link" to="./about">Группа</Link></li>
                   <li class={`nav-item ${curActive[1]}`}><Link class="nav-link" to="./projects/physics">Проекты</Link></li>
                   <li class={`nav-item ${curActive[2]}`}><Link class="nav-link" to="./partners">Партнеры</Link></li>

src/components/layout.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 
 import Header from "./header"
 import Footer from "./footer"
+
 import "../styles/layout.css"
 import "../styles/bootstrap.min.css"
 import "../styles/main.css"
@@ -12,7 +13,7 @@ const Layout = ({ children }) => {
   return (
     <>
       <Header siteTitle="NPM group" />
-      <div class = "container" style = {{paddingTop: `70px`}}>
+      <div class = "container">
         <main>{children}</main>
       </div>
         <Footer/>

src/styles/header.css

@@ -1,11 +1,15 @@
-header { background: rgb(248,249,250); }
+header { background: rgb(248,249,250); width: 100%; left: 0; top: 0; position: fixed; z-index: 1000;}
 
 .d-inline-block { margin-bottom: 0; }
-.navbar-nav.mr-auto { margin-left: 0px; }
 .nav-item.active { margin-right: 0px; margin-left: 0px;}
-.navbar.fixed-top { padding: 10px 20px 10px 20px; }
+/* .navbar.fixed-top { padding: 10px 20px 10px 20px; position: fixed; } */
 a.navbar-brand { margin-right: 0px; }
 
+div#navbarSupportedContent.navbar-collapse.collapse.show { 
+    padding-bottom: 200px; 
+    text-align: center;
+}
+
 #navbarSupportedContent {
     width: 100%;
     max-width: 1880px;
@@ -29,6 +33,10 @@ a.navbar-brand { margin-right: 0px; }
     margin: 0;
     padding: 0; }
 
+.navbar-nav.active { 
+    background-color: rgb(248,249,250); 
+}
+
 .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link{
     color: black;
 }

src/styles/layout.css

@@ -11,16 +11,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+
 .container {
   max-width: 1160px;
   width: 100%;
   margin: 0 auto;
   padding: 0px 15px 0 15px;
   padding-top: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
   font-weight: 400;
 }
 
+main { margin-top: 17%; }
+
+@media (min-width: 769px) { main { margin-top: 6%; }}
+
 img.gatsby-resp-image-image{
   max-width: 750px;
   max-height: 550px;