How to show diffrent <header /> in a sperate pages?

🙋Get Help
1

Hi,
Let’s say: I have 2 headers (Including Navigation), I want to show “Header 1” on “Home Page”, And I want to show “Header 2” on the other pages. I hope it’s clear for you guys :slight_smile:

Also I want to add some “css” to the “Navbar” when the page scrolls, How to achieve this ?

BTY:I am using “React-Bootstrap”.

Thanks A lots

2

Hi @zaid_sameer

One way to do this would be to conditionally test if you’re on the homepage and return different content from header.js like this:

const Header = ({ state }) => {

  const data = state.source.get(state.router.link);

  if (data.isHome) {

    return (
      <>
        <Container>
          <StyledLink link="/">
            <Title>This is the home page</Title>
          </StyledLink>
          <MobileMenu />
        </Container>
        <Nav />
      </>
    );

  } else {

    return (
      <>
        <Container>
          <StyledLink link="/">
            <Title>This is an inner page</Title>
          </StyledLink>
          <MobileMenu />
        </Container>
        <Nav />
      </>
    );

  }
};

I’m afraid I’ve never used react-bootstrap. For styling we recommend using Emotion CSS-in-JS which is bundled with Frontity, see https://docs.frontity.org/learning-frontity/styles for more info.

1 Like
3

Here’s another version which is a bit more DRY:

const Header = ({ state }) => {

  const data = state.source.get(state.router.link);

  return (

    <>
      <Container>
        <StyledLink link="/">
          <Title>{data.isHome ? 'This is the home page' : 'This is an inner page'}</Title>
        </StyledLink>
        <MobileMenu />
      </Container>
      <Nav />
    </>

  );

};

Which you use depends on how different the homepage header is from the other header.

1 Like