CODEWITHSUNDEEP
reactjsnavbarreact-bootstrap
J.erome
J.erome

Reputation: 788

Navbar doesn't stick to the top

I use the react-boostrap navbar in order to create my app. I want this navbar to stick to the top (so when the user is scrolling, the navbar is always on the top of his screen).

I took a look in the documentation where it stands that adding sticky = top to our <Navbar> should do the job but it isn't :

import React from 'react'
import {Link} from 'react-router-dom'

import 'bootstrap/dist/css/bootstrap.min.css';
import {Navbar} from 'react-bootstrap'
import {Container} from "reactstrap";

const Header = () => {
  return (
    <>
      <Container className="">
        <Navbar id="navbar"  sticky="top" expand="md" bg="primary" variant="dark" >
          <Navbar.Brand href="/">The movies warehouse</Navbar.Brand>
        </Navbar>
      </Container>

    </>
  )
}

export default Header;

In the CSS file I do the following changes :

/* nav bar */
#navbar {
    background-color: rgb(10, 4, 22) !important;
    transition: all 0.3s ease-out 0s !important;
    box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
    font-size: 18px !important;
}

What am I doing wrong ? Because actually the navbar stays at the top of the page, but I want it at the top of the screen.

Upvotes: 1

Views: 1887

Answers (2)

Igor Gonak
Igor Gonak

Reputation: 2250

Fixed position is not needed here. You are supposed to import your Header/Navbar in your upper most component, which is responsible for the overall layout of your application. In most cases it is App.js:

https://codesandbox.io/s/mystifying-perlman-r27big

If you do it like this, it's like it would have position: fixed with top:0, because there is no other component above it.

BTW: Your sticky="top" already adds following css rules:

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

Upvotes: 2

Marius ROBERT
Marius ROBERT

Reputation: 505

In CSS, set position : fixed; then you can place it where you want, for example top : 0; to stick it to the top

Upvotes: 0

Related Questions