how can I resize the Components when window size change in my NavBar?

Question

I'm new to ReactJs now learning the react-bootstrap and trying to learn the NavBar. I made a CodeSandbox.

I really like the design like this:

The NavBar is set to fixed="top" so it's always visible when user scroll.
When I change the size of the window the NavBar get higher I try setting css like:

.NavBar {
  max-height: 80px;
}

But Buttons and all components jump around wrapping making NavBar larger and not very good looking.

how can I resize the Components when window size change?

I see many pages uses different NavBar layouts and switch between them when window is resized. Is that done using css or should I create another React Component another NavBar and replace NavBar depending on window size?

score 1 · Accepted Answer · answered Oct 03 '20 at 03:14

I see many pages uses different NavBar layouts and switch between them when window is resized. Is that done using css or should I create another React Component another NavBar and replace NavBar depending on window size?

In React-bootstrap (or any Bootstrap library), this functionality is already provided for you. This is generally the job of Navbar.Toggle & Navbar.Collapse. Basically, this enables you to switch from the desktop view - wherein all the Nav Items are displayed on the header versus on the mobile view wherein majority of the Nav Items are inside a Dropdown which is toggleable via the Navbar.Toggle (Hamburger) Button.

So in short, my suggestion is to leverage the already available functionality of React-bootstrap regarding toggling between the desktop view and mobile view.

return (
  <>
    <Navbar
      expand="xl"
      bg="dark"
      variant="dark"
      fixed="top"
      collapseOnSelect
    >
      <Container fluid>
        <Navbar.Brand href="#home" className="img-container">
          <img alt="" src={logo1} />
        </Navbar.Brand>

        <Navbar.Toggle
          aria-controls="responsive-navbar-nav"
          onClick={toggle}
        />
        <Navbar.Collapse id="basic-navbar-nav">
          <Col>
            <Nav.Item>
              <Form inline>
                <FormControl
                  type="text"
                  placeholder="Search Title, event, date"
                  className="mr-sm-2 m-1"
                  size="lg"
                />
                <Button className="m-1" variant="outline-info" size="lg">
                  Search
                                </Button>
              </Form>
            </Nav.Item>
          </Col>
          <Col md="auto">
            <Button className="m-1" variant="primary" size="lg">
              Articles
                        </Button>
            <Button className="m-1" variant="primary" size="lg">
              Timeline
                        </Button>
            <Button className="m-1" variant="primary" size="lg">
              About
                        </Button>
          </Col>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  </>
);

In retrospect, you should also be able to assess that on mobile, the screen is too small so forcing in the Nav Items to be shown right away will block majority of the viewport - potentially causing UI/UX issues.

If you opt to disregard that and absolutely must place all of these items in the header even on mobile, you can always use media queries.

Example is on your image which I recommend you resize on small devices:

@media (max-width: 991px) {
  .navbar .navbar-brand {
      max-width: 280px;
  }
}

You can refer here to the Bootstrap break points: https://getbootstrap.com/docs/4.5/layout/overview/#containers

Refer here for React-bootstrap Navbar documentation: https://react-bootstrap.github.io/components/navbar/#navbars

Thanks but I want all Components in the NavBar visible until it comes to Mobile size screen, then a toggle hamburger is ok. I find it strange that react-bootstrap not have finer grain control. I want to move the search input closer and center it between the image and the buttons but very hard to do since image div swallow all space — Kid, Oct 04 '20 at 08:23
you can control that using media queries. the bootstrap stylesheet is customizable & easy to override — 95faf8e76605e973, Oct 04 '20 at 08:29
Thanks your your right Media Query was the answer I created a new [CodeSandbox](https://codesandbox.io/s/greta100-reactbootsrap-navbar-2-with-media-query-qy8m1?file=/src/styles/navbar.scss) with some attempt using media queries. The link you advice to for media queries, I see that is for bootstrap for web right? The class-names is class not className, will that even work for ReactJs anyway? Renaming class to className? — Kid, Oct 04 '20 at 09:11
React-bootstrap uses the same Bootstrap stylesheet. The breakpoints there are still relevant. Regarding `class` VS `className`, you can read here: https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16/46991278 for insight — 95faf8e76605e973, Oct 04 '20 at 09:12

how can I resize the Components when window size change in my NavBar?

1 Answers1