Bootstrap Mobile-Navbar not collapsed - javascript

In the mobile Version the navbar is not collapsing... Can somebody help. Does anybody see my mistake?I copy the source from bootstrap but it didn't work. it does not work because I work with react?
I would be grateful for any help
file App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
//Partikeln importieren
import Particles from 'react-particles-js';
//Hier importiert man seine Komponenten
import Navbar from "./components/Navbar";
import Header from "./components/Header";
...
...
...
file Navbar code
import React from 'react'
import Logo from "../img/logo_large.png"
// React Font awesome imports
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from "#fortawesome/free-solid-svg-icons"
//React-scroll install
//Navbar
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<div className="container">
{/*Logo variable von oben*/}
<a className="navbar-brand" href="#home"><img className="Logo" src={Logo} /> </a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="#about" >About Me<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#services">Services</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#experiences">Experiences</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#abilities">Abilities</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#blog">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#freetime">Freetime</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav >
)
}
export default Navbar

Remove the div element with the container name.

Related

Buttons on Navbar not aligned in reactJS

I am using the navbar from bootstrap 5. I having an UI issue.
What do I have?
This is the navbar I am currently having.
What do I want?
I want to align the navbar buttons (Login and Signup) to the right end.
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;
I have tried many attempts but still, it is not working. I am using bootstrap built-in classes also.
You just need to add a me-auto class with <ul> as given <ul class="navbar-nav me-auto">
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;
Just need to add me-auto in <ul> like this:
<ul className="navbar-nav me-auto">

How do I add a transition to my navbar menu in react when I click the toggle button

I have created an e-commerce base template in HTML and CSS / Bootstrap. I am trying to convert the template to React components for a NextJS site, but the toggle function was not initially working. I saw I can use React Hooks to toggle classes, which I have implemented using useState/isActive. The hamburger transition works but the transition for the actual menu does not.
Here is navbar.js
import Logo from '../images/logo-small-cropped.png'
import Image from 'next/image'
import React, { useState } from "react"
export default function Navbar({ }) {
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive);
};
return (
<nav className="navbar navbar-expand-md navbar-light border-top fixed-top border-bottom py-0" >
<div className="container-fluid text-center" >
<a className="navbar-brand" href="#">
<span className="mb-2">
<Image src={Logo} alt="Little Pink Boutique Logo" />
</span>
</a>
<button onClick={handleToggle} className="navbar-toggler navbar-toggler-button" type="button" aria-label="Toggle navigation">
<div id="hamburger" className={isActive ? "null" : "open"}>
<span></span>
<span></span>
<span></span>
</div>
</button>
<div className={isActive ? "collapse navbar-collapse" : "navbar-collapse"} >
<ul className="navbar-nav me-auto mb-2 mb-md-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/home" > </a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Women</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Men</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Children</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Accessories</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">FAQs</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2 mt-3 mb-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success mt-3 mb-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
)
}
The .collapse class is just the standard Bootstrap class, the navbar-collapse class is as follows.
.navbar-collapse{
background-color: rgb(238, 236, 236);
width: 100vw;
}
I'm not sure how to get the transition to work, or if this is the best way to do it.
Any help appreciated as always.
Try using the transition css property in the navbar-collapse class.
Something like this :-
.navbar-collapse{
transition: width 2s;
background-color: rgb(238, 236, 236);
width: 100vw;
}

Navbar doesn't expand (React JS)

I have a problem with my navbar: I create my js element and copy and paste te code form bootswatch in the render() element. Now I can see the navbar but it doesn't expand in any way. I install bootswatch, bootstrap, react-bootstrap in my code; improt the css file in the app.js file, but no sin of life. And in the same way the highlighted current link opened doesn't seems to move when I change page. I'm working on this language for the first time for a university project, so I'm scared it can create me some problem in the future.
Here's the code:
import React, { Component } from 'react';
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
<a className="navbar-brand" href="/">Fastbook</a>
<button className="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarColor01">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="./Rooms">Prenota</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Diventa Oste</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
)
}
}

reactJS with a dynamic bootsrap menu

I have a reactJS application and I need to dynamically build a bootstrap menu. In the general render of my application, I have the following code:
<div className="container">
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">{this.state.planName}</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
{this.renderMenu()}
</nav>
</div>
This is the code that I have in my {this.renderMenu()}
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.contributions}>Contributions</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.transfer}>Transfer</a>
</li>
<li class="active">Logout</li>
</ul>
</div>
)
This all works perfectly well. However, what I would like to do if only render the beneficiary menu option if menuBene = "Y", only render the transfer menu option if menuTransfer = "Y" and only render the transaction history menu option if menuTransaction = "Y".
Is there a syntax that allows me to have a condition within the render? Something like this:
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.contributions}>Contributions</a>
</li>
if (menuBene == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
</li>
}
if (menuTransaction == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
</li>
}
if (menuTransfer == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.transfer}>Transfer</a>
</li>
}
<li class="active">Logout</li>
</ul>
</div>
)
Quick and concise way to do this is to use inline if &&syntax
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

must be wrapped in an enclosing tag

I'm having trouble creating a simple component that renders a menu in my react application.
This is the code for my component:
import React, { Component } from 'react';
export default class menu extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
);
}
}
I'm putting it in the other component.
import menu from './componentes/menu';
constructor(props) {
super(props)
this.state = { sistemas: [] };
}
class App extends Component {
render() {
return (
<div>
<menu></menu>
</div>
<div className="App">
<div className="bs-header" id="content">
<div className="container">
<h1>Template Changelog</h1>
<p>Lists all changes to the HTML template files</p>
</div>
</div>
); //[js] JSX expressions must have one parent element.
}
}
I'm also getting the following error in the commented line
[js] JSX expressions must have one parent element.
Your App has more than one top level div. Wrap both in another div.
In React 16, you can wrap your components with Fragment which is a cleaner approach as compared to wrap it with additional div tag.
All you have to do is just import Fragment from react library.
import React, { Component, Fragment } from 'react';
And you can use it
<Fragment>
<ComponentA />
<ComponentB />
</Fragment>
Documentation: https://reactjs.org/docs/fragments.html
Otherwise you can just wrap your components with div tag as mentioned by #Daniel A. White

Categories