Two Fixed Navbars in React JS - reactjs

Question

I have a Navbar which is already fixed to Top and looks something like this:
Now I want to add one more Navigation on top of this and it should look something like this:
The NavBars should be fixed to the top and first one should be slightly smaller in height than the second one.
The code that I am currently using right now is:
<Navbar variant="light" fixed="top" expand="lg" className="pt-4 pb-4">
<Container>
<Navbar.Brand href="/"><Image src={logo}></Image></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/" className="ml-xl-4">Home</Nav.Link>
<Nav.Link className="ml-xl-4">Shop</Nav.Link>
<Nav.Link className="ml-xl-4">Sale</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-5" />
</Form>
<Nav.Link as={Link} to="/"><Image src={accountIcon}></Image></Nav.Link>
<Nav.Link as={Link} to="/cart" className="pr-0"><Image src={cartIcon}></Image></Nav.Link>
</Navbar.Collapse>
</Container>
</Navbar>
I am using FontAwesome, StyledIcons, StyledComponents and ReactBootstrap. Now I am unable to add another NavBar to top of this existing one. I tried to create another Nav inside the Container, but it is failing. Please guide me in aligning the two Navbars.

Answer 1

One the reasons I moved away from UI libraries is that they can be rather limiting in what you can do in terms of appearance customization. I often find that the more customized the look, the more CSS/Style overrides I have write. Some components will have completely different layouts and different classes for the same component, which means more CSS overrides! As such, this back and forth struggle is one the main reasons why I'd highly recommend utilizing the power of CSS-in-JS (like #emotion or styled-components to name a few).
Nevertheless, here's a working demo:
or
Preview: https://7m0hn.csb.app/
I've used Typescript instead of plain Javascript because VSCode allows you to hover over the component to view a JSDoc description (you may need to scroll down to view the description within dialog). Holding ctrl, while mouse left-clicking on the component, opens a preview within the same tab!
The alternative approach is just to manually add classNames to the ReactBootstrap components and apply CSS overrides. In this case, the bottom bar would be:
position: fixed; // locks it to screen
top: 30px; // at this position (factoring in the height of the top bar)
But again, this won't be as flexible as writing your own reusable components. You may find yourself creating many classes to style the same component for different pages/screen layouts/themes (like this DOM versus this DOM; or heck, even compared to this DOM which just uses a UI library sparingly).
Fixed/index.ts
import styled from "#emotion/styled";
/**
* The Fixed component is a custom styled component to mainly adjust related 'fixed: position" CSS properties.
*
* #param background - sets 'background' CSS property (default: "transparent").
* #param bottom - sets 'bottom' CSS property (default: undefined).
* #param height - sets 'height' CSS property (default: "auto").
* #param left - sets 'left' CSS property (default: undefined).
* #param padding - sets 'padding' CSS property (default: "0px").
* #param right - sets 'right' CSS property (default: undefined).
* #param top - sets 'top' CSS property (default: undefined).
* #param width - sets 'width' CSS property (default: "100%").
*/
const Fixed = styled.div<{
background?: string;
bottom?: string;
height?: string;
left?: string;
padding?: string;
right?: string;
top?: string;
width?: string;
}>`
position: fixed;
display: flex;
align-items: center;
width: 100%;
background: ${({ background }) => background || "transparent"};
border-bottom: 2px solid #ccc;
height: ${({ height }) => height || "auto"};
padding: ${({ padding }) => padding || "0px"};
top: ${({ top }) => top};
right: ${({ right }) => right};
bottom: ${({ bottom }) => bottom};
left: ${({ left }) => left};
width: ${({ width }) => width || "100%"};
`;
export default Fixed;
Flex/index.ts
import styled from "#emotion/styled";
/**
* The Flex component is a custom styled component to mainly set 'flex' CSS properties.
*
* #param align - sets 'align-items' CSS property (default: "stretch").
* #param justify - sets 'justify-content' CSS property (default: "flex-start").
* #param padding - sets 'padding' CSS property (default: "0px").
* #param width - sets 'width' CSS property (default: "100%").
*/
const Flex = styled.div<{
align?:
| "stretch"
| "center"
| "flex-start"
| "flex-end"
| "baseline"
| "initial"
| "inherit";
justify?:
| "flex-start"
| "flex-end"
| "center"
| "space-between"
| "space-around"
| "space-evenly";
padding?: string;
width?: string;
}>`
display: flex;
justify-content: ${({ justify }) => justify || "flex-start"};
align-items: ${({ align }) => align || "stretch"};
padding: ${({ padding }) => padding || "0px"};
width: ${({ width }) => width || "100%"};
`;
export default Flex;
Navbar/index.tsx
import * as React from "react";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Navbar from "react-bootstrap/Navbar";
import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl";
import { IoPersonOutline } from "react-icons/io5";
import { GiShoppingCart } from "react-icons/gi";
import Fixed from "../Fixed";
import Flex from "../Flex";
export type eventKey = string | null;
const TopNavBar = () => {
const [language, setLanguage] = React.useState<eventKey>("DE");
const [currency, SetCurrency] = React.useState<eventKey>("€ EUR");
const handleLanguageChange = React.useCallback((eventKey: eventKey) => {
setLanguage(eventKey);
}, []);
const handleCurrencyChange = React.useCallback((eventKey: eventKey) => {
SetCurrency(eventKey);
}, []);
return (
<>
<Navbar className="navbar-top" fixed="top">
<Flex justify="flex-end" padding="0 20px 0 0">
<NavDropdown
onSelect={handleLanguageChange}
alignRight
title={language}
id="basic-nav-dropdown"
>
<NavDropdown.Item eventKey="EN">EN</NavDropdown.Item>
<NavDropdown.Item eventKey="ES">ES</NavDropdown.Item>
<NavDropdown.Item eventKey="DE">DE</NavDropdown.Item>
<NavDropdown.Item eventKey="JP">JP</NavDropdown.Item>
</NavDropdown>
<NavDropdown
onSelect={handleCurrencyChange}
alignRight
title={currency}
id="basic-nav-dropdown"
>
<NavDropdown.Item eventKey="€ EUR">€ EUR</NavDropdown.Item>
<NavDropdown.Item eventKey="£ GBP">£ GBP</NavDropdown.Item>
<NavDropdown.Item eventKey="¥ JPY">¥ JPY</NavDropdown.Item>
<NavDropdown.Item eventKey="$ USD">$ USD</NavDropdown.Item>
</NavDropdown>
</Flex>
</Navbar>
<Fixed background="#fff" padding="5px 60px 0 20px" top="30px">
<Flex justify="flex-start">
<Navbar.Brand href="/">Brand</Navbar.Brand>
</Flex>
<Flex justify="center">
<Form inline>
<FormControl
type="text"
placeholder="Search"
className="search-box"
/>
</Form>
</Flex>
<Flex justify="flex-end">
<Nav.Link>
<IoPersonOutline />
</Nav.Link>
<Nav.Link className="pr-0">
<GiShoppingCart />
</Nav.Link>
</Flex>
</Fixed>
</>
);
};
export default TopNavBar;
App.tsx
import Navbar from "./Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
const App = () => (
<div className="app">
<Navbar />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<p>
Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan
tincidunt. Nulla porttitor accumsan tincidunt. Curabitur arcu erat,
accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit
neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed
sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam
vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum
porta. Pellentesque in ipsum id orci porta dapibus.
</p>
<p>
Proin eget tortor risus. Donec sollicitudin molestie malesuada. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id
dui posuere blandit. Curabitur aliquet quam id dui posuere blandit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
sit amet ligula. Praesent sapien massa, convallis a pellentesque nec,
egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed
sit amet dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor
risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in
ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in
ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit
amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa,
convallis a pellentesque nec, egestas non nisi.
</p>
</div>
);
export default App;
index.tsx
import { render } from "react-dom";
import App from "./App";
render(<App />, document.getElementById("root"));
styles.css
.app {
margin-top: 120px;
font-family: sans-serif;
text-align: center;
min-height: 120vh;
}
.navbar-top {
padding: 0;
background: #dadada;
border-bottom: 2px solid #ccc;
}
.nav-link {
padding: 2px 20px;
}
.search-box {
height: 35px;
}
::-moz-focus-inner {
border: 0;
}
::-webkit-scrollbar {
display: none;
}
html,
body {
margin: 0;
padding: 0;
background: #f9f9f9;
}
*,
:after,
:before {
-ms-overflow-style: none;
scrollbar-width: none;
box-sizing: border-box;
}