CODEWITHSUNDEEP
htmlcssreactjsjsx
peterpeter5
peterpeter5

Reputation: 83

Sticky position not working in React app?

Somewhat new to react, but have learnt the foundations - hooks etc.

I'm trying to create a simple blog app which uses a sticky header - assuming it's a simple ase of 'position: sticky' CSS styling. However, I've tried this but the element is not sticky. Having search the web, I came across the common issue regarding 'overflow'. Checked the entire project and there is no 'overflow' property present throughout the project. Any other ideas? Code below.

Header.js

const Header = () => (
<div className='header'>
    <Nav>
        <div className='logo'>
            <NavLink exact to='/'>
                <h1>Logo</h1>
            </NavLink>
        </div>
        <div className="forinput">
            <InputWithLabel
                id="search"
                isFocused
                className='input'
            />
        </div>
        <NavMenu>
            <NavLink className='button' exact to='/' activeStyle>
                Home
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Designers
            </NavLink>
            <NavLink className='button' exact to='/detail' activeStyle>
                Items
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Saveds
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Profile
            </NavLink>
        </NavMenu>
    </Nav>
    <hr/>
</div> );

HeaderElements.js

import { NavLink as Link } from 'react-router-dom';

export const Nav = styled.nav
    background: #fff;
    height: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem calc((100vw - 1000px) / 2);
    position: sticky;
    top: 0px;
    z-index: 1;


export const NavLink = styled(Link)
    colour: #000;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 10px;
    padding-top: 3px;
    height: 100%;
    cursor: pointer;

    &.active {
        colour: #15cdfc;
    }

export const NavMenu = styled.div
    display: flex;
    align-items: centre;

    @media screen and (max-wdith: 768px) {
        display: none
    }

layout.js

const Layout = (props) => (
    <body>    
        <div>
            <Header />
            {props.children}
        </div>
    </body>
);

App.js

const App = () => (
  <Router>
    <Layout className='App'>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/p/:id' component={Detail} />
      </Switch>
    </Layout>
  </Router>
);

Upvotes: 1

Views: 2225

Answers (1)

peterpeter5
peterpeter5

Reputation: 83

Me being stupid... Turns out because the 'page' or body wasn't long enough, it naturally wouldn't scroll. Having adjusted the height of the page, the sticky nav works as desired.

Upvotes: 1

Related Questions