{"componentChunkName":"component---src-templates-post-js","path":"/create-nav-and-header-react","result":{"data":{"markdownRemark":{"html":"

In this post we will create a Navigation bar and a Header component for our landing page.

\n

Go head and create a navs folder and create a Nav.js file with the following:

\n
import React from \"react\"\n\nconst Nav = () => (\n  <nav className=\"nav border-top flex items-center justify-between flex-wrap bg-transparent p-55 z-100\">\n    <div className=\"flex items-center flex-no-shrink text\">\n      <h1 className=\"font-display text-red text-2xl\">\n        <a className=\"no-underline text-red\" href=\"/\">\n          Lunar\n        </a>\n      </h1>\n    </div>\n  </nav>\n)\n\nexport default Nav
\n

🌞 We have an HTML Nav bar that is is responsive and allows the user to redirect to the Home page of the site.

\n

Next up create a headers folder and create a file called LandingHeader.js with the following contents:

\n
import React from \"react\"\nimport { HeadingOne } from \"../typography\"\nconst LandingHeader = ({ imgURL, text = \"\" }) => {\n  return (\n    <>\n      <div\n        className=\" text-center bg-transparent \"\n        style={{\n          background: `url(${imgURL})no-repeat center center`,\n          backgroundSize: \"cover\",\n          height: \"570px\",\n          marginTop: \"-85px\",\n        }}\n      >\n        <HeadingOne className=\"text-5xl pt-44 s:text-4xl\">{text}</HeadingOne>\n      </div>\n    </>\n  )\n}\n\nexport default LandingHeader
\n

🌞 This is a div with a custom style to allow the image to sit in the background of the component. Tailwind CSS has directives and plugins for this sort of thing, however I left this out and went the vanilla route. Do not be scared to code!

\n

🌞 Then we have Vanilla CSS styles for this component as you are unable to replicate this in TailwindCSS.

\n

🌞 Lastly, we have two props for the image URL and whatever text you want to put in the H1.

\n

Once you're done it should look like this:

\n

\"landingheader-component\"

","frontmatter":{"date":"July 16, 2020","path":"/create-nav-and-header-react","title":"Create Nav and Header","postnumber":36}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-typography-components-react","postnumber":37}}},"next":{"node":{"frontmatter":{"path":"/execute-booking-mutation","postnumber":35}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}