-1
having this very bizarre problem with my gatsby project where the SEO component (quite similar to the default on suggested in docs) is effecting my page layout. no matter where i put the SEO component (inside or outside the layout wrapper component my navbar seems to be effected... very strange because the seo component from what i can see has no stylings or jsx or css or anything. its just a way to add meta tags for SEO.. can someone help? here is my page layout (using basic react context and seo compoennt here to inject meta deatail)
<NavActive.Provider value={active}>
<SEO image={logo} />
<Layout active={active} setActive={setActive}>
<div className={`${active&&'body-active'}`}>
<Banner />
<Column />
<Paragraph text={text} header/>
<Blackbar />
<Paragraph text={text} />
<Blackbar button />
<Split />
<div className='c'>
<Blackbar />
</div>
</div>
</Layout>
</NavActive.Provider>
and then here is the way my seo compoennts is structured. have NO idea what could be causing this!
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, image, title }) {
const { pathname } = useLocation()
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
author
image
url
}
}
}
`
)
const seo = {
title: title || "Orcawise - Start a willing conversation",