how can I resize the Components when window size change in my NavBar? - 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?

Answer 1

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