1

I have a Next.js 13 project with a layout.tsx file in the root of my app directory that looks like this:

import Footer from "../components/Footer";
import HeaderDecoration from "../components/HeaderDecoration";
import Logo from "../components/Logo";
import Navigation from "../components/Navigation";
import Subheader from "../components/Subheader";
import "../components/styles.css";

export default function RootLayout({
    // Layouts must accept a children prop.
    // This will be populated with nested layouts or pages
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        <body>
          <HeaderDecoration/>
          <Subheader/>
          <Logo/>
          <Navigation/>
          {children}
          <Footer/>
        </body>
      </html>
    )
  }

This layout is applied to every page. Every page has a different background color. Right now, these different background colors encompass the page's contents but not the header/logo/navbar/footer (since the header/logo/navbar/footer are outside of {children} in layout.tsx).

So, for instance, I would have a page with a header with a blank white background, an orange background for the body, and a white background around the footer again. In this example, I would want the full page to have an orange background.

One potential way to deal with this would be to somehow pass parameters from a page to layout.tsx, however I'm not sure how to accomplish this. Another could be to have a global state backgroundColor that layout.tsx has access to, but again, I'm not sure how to accomplish that.

Initially, each page had the header/logo/navbar/footer components in it (instead of having them in layout.tsx), which does solve this problem; however since these are recurrent on every single page I would like to have them in layout.tsx if possible.

If possible, how can I keep the header/logo/navbar/footer in layout.tsx and have a complete background color change on each page?

isherwood
  • 58,414
  • 16
  • 114
  • 157
esd
  • 63
  • 1
  • 4

1 Answers1

0

You can render your components(navbar, logo, header etc) beside the other pages/components by providing position: relative/absolute(accordingly) & zIndex:10 CSS to the Navigation or logo component. It worked for me;

Try this CSS on your Navbar/logo component;

position: absolute/relative;
z-index: 10;
Ahsan Khalid
  • 69
  • 8