Develop Reference

Creating a mega menu using react-bootstrap

Currently I am working on creating mega menu for one of my projects. So far I was able to create a responsive navbar, however the requirement is to create a dropdown panel with 100% width. Tried various ways to make it full width but none get worked.
Note : All the other Nav.Link are too need to be same as NavDropdown.
import React from "react";
import {
Nav,
Navbar,
NavDropdown,
Col,
Row,
Container,
Dropdown,
} from "react-bootstrap";
import { Link } from "react-router-dom";
import "./home.css";
export function Home() {
return (
<div>
<h1>Home page</h1>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#pricing">shoes</Nav.Link>
<Nav.Link href="#features">handbags</Nav.Link>
<Nav.Link href="#pricing">jewelry & accessaories</Nav.Link>
<Nav.Link href="#pricing">men</Nav.Link>
<Nav.Link href="#pricing">kids</Nav.Link>
<Nav.Link href="#pricing">home</Nav.Link>
<Nav.Link href="#pricing">sale</Nav.Link>
<NavDropdown
// className="pr-2 py-2 align-text-top"
title="women"
id="basic-nav-dropdown"
>
<Container className="eventsNav pt-0 mt-0">
<Row>
<Col xs="12" md="4" className="text-left">
<Dropdown.Header>Catering</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Corporate
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Private
</a>
</Link>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>
{/* <FontAwesomeIcon
color="black"
icon={"chalkboard-teacher"}
size="1x"
className="pr-1"
/> */}
{" "}
Classes
</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Barista 101
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
History of Coffee
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Intro to Cafe Snobbery
</a>
</Link>
</Dropdown.Item>
<Dropdown.Divider className="d-md-none" />
</Col>
<Col xs="12" md="4" className="text-left">
<Dropdown.Header>
{/* <FontAwesomeIcon
color="black"
icon={"building"}
size="1x"
className="pr-1"
/> */}
{" "}
Rentals
</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Fireside Room
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Roasting Room
</a>
</Link>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>
{/* <FontAwesomeIcon
color="black"
icon={"sun"}
size="1x"
className="pr-1"
/> */}
{" "}
Seasonal
</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Coldbrew Night
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link text-wrap" role="button">
Campfire Coffee Class
</a>
</Link>
</Dropdown.Item>
</Col>
<Col xs="12" md="4" className="text-left">
<Dropdown.Header>
{/* <FontAwesomeIcon
color="black"
icon={"building"}
size="1x"
className="pr-1"
/> */}
{" "}
Rentals
</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Fireside Room
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Roasting Room
</a>
</Link>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>
{/* <FontAwesomeIcon
color="black"
icon={"sun"}
size="1x"
className="pr-1"
/> */}
{" "}
Seasonal
</Dropdown.Header>
<Dropdown.Item>
<Link href="/">
<a className="nav-link" role="button">
Coldbrew Night
</a>
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link href="/">
<a className="nav-link text-wrap" role="button">
Campfire Coffee Class
</a>
</Link>
</Dropdown.Item>
</Col>
</Row>
</Container>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
.nav-link {
font-size: 0.95rem;
}
#basic-nav-dropdown {
font-size: 0.95rem;
}
#seeMoreLink {
color: #607d8b;
}
#seeMoreLink:hover {
color: black;
font-weight: 400;
}
.dropdown-menu {
padding: 1em;
}
.dropdown-item:hover {
outline: none;
box-shadow: none;
background: none;
}
.dropdown-item a:hover {
color: black;
}
.dropdown-item {
height: 2em;
padding-left: 0em;
}
.dropdown-header {
font-weight: 600;
padding-left: 0em;
}
.dropdown-menu {
/* position: relative; */
padding-top: 10px;
}
#media only screen and (min-width: 600px) {
.eventsNav {
position: absolute;
left: -100px;
background: #eaafc8 !important;
background: -webkit-linear-gradient(to right, #eaafc8, #654ea3) !important;
background: linear-gradient(to right, #eaafc8, #654ea3) !important;
width: 44em;
padding-bottom: 1em;
}
}
Expected result
Current implementation
Thanks and best regards

A Nav.Dropdown sets position: relative; on the nav-item (Nav.Link). Since dropdown-menu has position: absolute; it will be positioned relatively to the nav-item.
Do:
.nav-item.dropdown {
position: inherit;
}
.dropdown-menu {
width: 100%;
transform: translate(0px, 70px); /* change numbers for your layout */
}
It's recommended to be more specific with the CSS selectors, to not affect any other dropdowns on your page.
The reason for transform is because of React-Bootstrap's implementation of dropdown and the way they are positioned, are different than Bootstrap. Play with the position of dropdown-menu using Dev Tools, then apply the changes in your own stylesheet.
It should also be possible to add position: relative; to nav and then position the dropdown-menu below it. Depends on your layout.
Here's how it's done in Bootstrap (5.3), JSFiddle. Simply removing the class .dropdown from the nav-item and setting width: 100%; on the dropdown-menu is all it needs.

React Router Shows Blank Page When Using <Link> . Stuck on this problem since a while

Here is the code of a component named topbar which refers to navbar of a page,
as soon as I save the page it appears to be blank.
Please help me to debug it as I am stuck for a while on it.
As soon as I comment the Link part , the page starts working instantly.
import { Link } from "react-router-dom";
import "./topbar.css";
export default function Topbar() {
const user = true;
return (
<div className="top">
<div className="topLeft">
<i className="topIcon fab fa-facebook-square"></i>
<i className="topIcon fab fa-instagram-square"></i>
<i className="topIcon fab fa-pinterest-square"></i>
<i className="topIcon fab fa-twitter-square"></i>
</div>
<div className="topCenter">
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/">
HOME
</Link>
</li>
<li className="topListItem">ABOUT</li>
<li className="topListItem">CONTACT</li>
<li className="topListItem">
<Link className="link" to="/write">
WRITE
</Link>
</li>
{user && <li className="topListItem">LOGOUT</li>}
</ul>
</div>
<div className="topRight">
{user ? (
<Link className="link" to="/settings">
<img
className="topImg"
src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
/>
</Link>
) : (
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/login">
LOGIN
</Link>
</li>
<li className="topListItem">
<Link className="link" to="/register">
REGISTER
</Link>
</li>
</ul>
)}
<i className="topSearchIcon fas fa-search"></i>
</div>
</div>
);
}

Why is my fixed navbar ontop of my sticky navbar when i coded it in the bottom?

I'm trying to code one sticky bar and one fixed navbar right underneath the sticky with Bootstrap 5. I created one Navbar file with the sticky navbar code in it, and one FixedNav file with my fixed navbar code in it and brought in the Fixed navbar component inside my sticky navbar component. '
This is what it currently looks like, I want the opposite, yellow Nav on the bottom of white
At first, the fixed navbar was overlapping the sticky, and after researching I found out that setting the body with a padding-top:50px would fix it. However, I noticed that the solution only makes the sticky nav bar long enough to show below the fixed navbar, so now the fixed navbar is on top of the sticky navbar. How do I make it so that the sticky navbar is ON TOP of the fixed navbar?
There is another navbar called LogIn navbar which renders a new navbar once the user is logged in (wont be focusing on that, in case anyone gets confused with the ternary statement where I bring in the fixed nav component)
import React from "react";
import { connect } from "react-redux";
import { logout } from "../store";
import Fixed from "./fixedNav";
import LoginNav from "./LoginNav";
//temporary navBar without loggedIn function/difference
const tempUserId = 1;
const Navbar = ({ handleClick, isLoggedIn }) => (
<div>
<div>
<nav
className="navbar sticky-top navbar-light bg-light"
style={{ backgroundColor: "#F0FFFF" }}
>
<div>
<form className="d-flex">
<input
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button className="btn btn-sm btn-outline-secondary" type="submit">
Search
</button>
</form>
</div>
<div>
<a href="/" className="navbar-brand" />
Grace Barker
</div>
<div>
<ul className="nav justify-content-end">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/">
Contact Us
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/cart">
Cart
</a>
</li>
</ul>
</div>
</nav>
{isLoggedIn ? (
<LoginNav handleClick={handleClick} isLoggedIn={isLoggedIn} />
) : (
<Fixed handleClick={handleClick} isLoggedIn={isLoggedIn} />
)}
</div>
</div>
);
FIXED NAVBAR CODE
import React from "react";
import { Link } from "react-router-dom";
const Fixed = ({ handleClick, isLoggedIn }) => (
<div>
<nav
className=" navbar fixed-top navbar-expand-lg"
style={{ backgroundColor: "#FFF8DC" }}
>
<div className="collapse navbar-collapse " id="navbarSupportedContent">
<ul className="nav nav-tabs">
<li className="nav-item ">
<Link to="/home" className="nav-link ">
Home
</Link>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle "
data-bs-toggle="dropdown"
href="/"
role="button"
aria-expanded="false"
>
Dogs
</a>
<ul className="dropdown-menu">
<li>
<a className="dropdown-item " href="/dogs">
Available Dogs
</a>
</li>
<li>
<a className="dropdown-item " href="/">
Featured Dogs
</a>
</li>
</ul>
</li>
<li className="nav-item">
<Link to="/AboutUs" className="nav-link ">
About Us
</Link>
</li>
</ul>
</div>
<div>
<ul className="nav justify-content-end">
<li className="nav-item">
<a className="nav-link active " aria-current="page" href="/users">
Users
</a>
</li>
<li className="nav-item">
{isLoggedIn ? (
<a
className="nav-link active "
aria-current="page"
href="/home"
onClick={handleClick}
>
LogOut
</a>
) : (
<a className="nav-link active " aria-current="page" href="/login">
Login
</a>
)}
</li>
</ul>
</div>
</nav>
</div>
);
export default Fixed;
CSS
body {
font-family: "Courier New", Courier, monospace;
padding-top: 50px;
}

CSS position fixed is similar to position absolute, it hides everything under it. You can set z-index value to it to change its layer order. If you want to show the sticky nav bar just under the fixed one you have to give it a top value same as the height of fixed nav bar.
#fixed-nav {
position: fixed;
top: 0;
height: 72px;
z-index: 100;
}
#sticky-nav {
position: sticky;
top: 72px; // same as the height of fixed nav bar.
z-index: 200;
}

add icon to header navBar (I am not getting that how to add icon on the most left in my NavBar)

add icon to header navBar
I am not getting that how to add icon on the most left in my NavBar.
This is a custom class of NavBar.js. I want an icon in this bar on the most left.
I have added the buttons with link and they are in the center of the nav bar
i want the icon .png to be appear to the most left in the navBar
Kindly help!!
import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
class Navbar extends Component {
logOut (e) {
e.preventDefault()
localStorage.removeItem('usertoken')
this.props.history.push(`/`)
}
render () {
const loginRegLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/login" className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to="/my" className="nav-link">
my
</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link">
Register
</Link>
</li>
</ul>
)
const userLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/profile" className="nav-link">
User
</Link>
</li>
<li className="nav-item">
<a href="#" onClick={this.logOut.bind(this)} className="nav-link">
Logout
</a>
</li>
</ul>
)
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
<button className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar1"
aria-controls="navbar1"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-md-center"
id="navbar1">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/" className="nav-link">
Home
</Link>
</li>
</ul>
{localStorage.usertoken ? userLink : loginRegLink}
</div>
</nav>
)
}
}
export default withRouter(Navbar)
```

App.js
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
class Navbar extends Component {
logOut(e) {
e.preventDefault();
localStorage.removeItem("usertoken");
this.props.history.push(`/`);
}
render() {
const loginRegLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/login" className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to="/profile" className="nav-link">
Profile
</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link">
Register
</Link>
</li>
</ul>
);
const userLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/profile" className="nav-link">
User
</Link>
</li>
<li className="nav-item">
<Link onClick={this.logOut.bind(this)} className="nav-link">
Logout
</Link>
</li>
{/* Dropdown */}
<li className="nav-item dropdown">
<Link
className="nav-link dropdown-toggle"
id="navbardrop"
data-toggle="dropdown"
>
Dropdown link
</Link>
<div className="dropdown-menu">
<Link className="dropdown-item" href="#">
Link 1
</Link>
<Link className="dropdown-item" href="#">
Link 2
</Link>
<Link className="dropdown-item" href="#">
Link 3
</Link>
</div>
</li>
</ul>
);
return (
<nav className="navbar navbar-expand-md bg-dark navbar-dark">
<Link className="navbar-brand">
<img
src="https://via.placeholder.com/50"
alt="Logo"
className="img-thumbnail"
/>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar"
>
<span className="navbar-toggler-icon" />
</button>
<div
className="collapse navbar-collapse justify-content-md-center"
id="collapsibleNavbar"
>
{localStorage.usertoken ? userLink : loginRegLink}
</div>
</nav>
);
}
}
export default withRouter(Navbar);
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Nav from "./App";
const App = props => (
<Router>
<div>
<Nav />
<Route exact path="/" />
</div>
</Router>
);
render(<App />, document.getElementById("root"));
Hi please check the Link for add icon in most left.

React & Bootstrap 4 Navbar not positioning correctly

I am building a web app using React/Redux and Bootstrap4 (I am not reactstrap). The app has a navbar at the top of the page, however, when the navbar renders it is not aligned to the top of the browser but moved down (see below - note: there is another sidebar link above 'patients' that is being covered by the navbar)
I've been through my jsx and cannot figure out what is causing the navbar to not position correctly - it should be at the top and fixed when scrolling (see below).
I've listed the relevant code below (just the components' render funcitons) - if I've missed any relevant parts, comment and I will edit. The react app was built using create-react-app.
index.html
<html>
<head>
...
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>...required scripts...</script>
</body>
</html>
App.js
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Route exact path="/login" component={LoginPage} />
<Route exact path="/dashboard" component={Dashboard} />
</div>
</Router>
</Provider>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<>
<Navbar />
<div className="app-body">
<Sidebar path="dashboard" />
</div>
</>
);
}
}
Navbar.js
class Navbar extends Component {
onLogoutClick = e => {
e.preventDefault();
this.props.logoutUser();
};
render() {
const { user } = this.props.auth;
return (
<header className="app-header navbar">
<button className="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
<span className="navbar-toggler-icon" />
</button>
<a href="#" className="navbar-brand">
<img src={logo} className="navbar-brand-full" height="35" alt="expo" />
<img src={sygnet} className="navbar-brand-minimized" height="30" width="30" alt="expo" />
</a>
<button className="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show" >
<span className="navbar-toggler-icon" />
</button>
<ul className="nav navbar-nav ml-auto">
<li className="nav-item dropdown px-3">
<a href="" className="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
{user.name}
</a>
<div className="dropdown-menu dropdown-menu-right">
<Link to="/profile" className="dropdown-item">
<i className="fa fa-user" />
Profile
</Link>
<button onClick={this.onLogoutClick} className="dropdown-item" style={{ cursor: 'pointer' }} >
<i className="fas fa-power-off" />
Logout
</button>
</div>
</li>
</ul>
</header>
);
}
}
Sidebar.js
return (
<div className="sidebar">
<nav className="sidebar-nav">
<ul className="nav">
<li className={liDashboard}>
<Link to="/dashboard" className={linkDashboard}>
<i className="nav-icon fas fa-fw fa-columns" /> Dashboard
</Link>
</li>
<li className={liPatients}>
<Link to="/patients" className={linkPatients}>
<i className="nav-icon fas fa-fw fa-users" /> Patients
</Link>
</li>
<li className={liInvoices}>
<Link to="/invoices" className={linkInvoices}>
<i className="nav-icon fas fa-fw fa-dollar-sign" /> Invoices
</Link>
</li>
<li className={liProfile}>
<Link to="/profile" className={linkProfile}>
<i className="nav-icon fas fa-fw fa-user" /> Profile
</Link>
</li>
<li className="nav-title"> Resources</li>
<li className={liDocuments}>
<Link to="/documents" className={linkDocuments}>
<i className="nav-icon fas fa-file" /> Documents
</Link>
</li>
<li className={liEducation}>
<Link to="/education" className={linkEducation}>
<i className="nav-icon fas fa-graduation-cap" /> Education
</Link>
</li>
</ul>
</nav>
<button className="sidebar-minimizer brand-minimizer" type="button" />
</div>
);
};