This is the HTML code I'm trying to convert using the react-bootstrap package
i couldn't find any details for the sidebar like this.
<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Core</div>
<a class="nav-link" href="index.html">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<div class="sb-sidenav-menu-heading">Interface</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Layouts
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="layout-static.html">Static Navigation</a>
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
</nav>
</div>
</div>
</div>
</nav>
i have partially converted it but the submenu is not working as in the image
<Navbar bg="" variant="" expand="" bsPrefix="accordion" className="sb-sidenav sb-sidenav-dark">
<div className="sb-sidenav-menu">
<Nav className="nav" activeKey="/home">
<div className="sidebar-sticky"></div>
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
</Nav>
</div>
</Navbar>
use this:
<nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Core</div>
<a class="nav-link" href="index.html">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
Layouts
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Static Navigation</a>
<a class="dropdown-item" href="#">Light Sidenav</a>
</li>
</div>
</div>
</nav>
check this:https://jsfiddle.net/69x8pzmy/2/
Related
i have created a react app. but it have some react routers issue when i navigate the URL to another page locally it works perfectly fine but when i navigate by the link of http it gives a 404 error.
The navbar is changed in mobile device and in other devices.
here it is on other devices
and here it is on mobile devices
when i navigate the route to go on another page it shows the error of :
here is my code on mobile devices
<nav className="mobileTopBar">
<div className="container bg-grey m-0 text-light">
<div className="col-lg-7 pt-3">
<div className="row">
<div className="col-6">
<img src={MobileLogo} className="ms-2" alt="logo that will show on mobile screens only" />
</div>
<div className="col-6">
<div className="row pt-2">
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fas fa-phone-alt text-white"></i> </p>
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fab fa-whatsapp text-white"></i> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.facebook.com/hosters.pk" target="_blank"> <i className="fab fa-facebook-f"> </i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.youtube.com/channel/UCQAxN4p6gnl-T0M0UnIOr4w" target="_blank"> <i class="fab fa-youtube"></i> </a> </p>
<p className="col-1 top-pra fw-bolder ms-1"> <i className="fab fa-linkedin-in"></i> </p>
</div>
</div>
</div>
</div>
<div className="col-lg-5 ps-2 pb-3">
<div class="container-fluid text-start p-0 text-dark">
<button class="navbar-toggler me-5 btn bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-list navbar-toggler-icon text-dark"></i>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span><ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item text-dark">
<span href="#" class="nav-link mx-2 text-decoration-none">
<a class="text-decoration-none text-white" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Partners
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item " href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none text-white" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none text-white" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</div>
</div>
</nav>
and on other devices
<nav class="navbar navbar-expand-lg bg-white p-0 m-0 navbar-light">
<div class="container-fluid text-center p-0">
<span class="navbar-brand p-0 m-0" href="#">
<a class="text-decoration-none " href="/">
<img alt="pictures" src={OtherDeviceLogo} className="w-50" />
</a>
</span>
<div className="w-60 float-start OtherDevice">
<div className="my-1">
<form className='card-form p-1 bg-l-grey mx-1' action="https://hoster.pk/clientarea/cart.php?a=add&domain=register" method="post" target='_blank'>
<input type="text" name="query" size="20" className='card-input border-0 px-4 bg-l-grey w-100' placeholder='Find Your Perfect Domain' />
<button type="submit" value="Go" className='card-button btn bg-green w-25 text-white fw-bolder'> Go </button>
</form>
</div>
</div>
<button class="navbar-toggler me-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-green">
</span>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-dark d-flex" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span href="#" class="nav-link text-dark mx-2 text-decoration-none">
<a class="text-decoration-none" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Partners <p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item" href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</nav>
thanks in advance :)
If you install React Router Dom, you have to change
from <a class="text-decoration-none" href="/windows">
to <Link class="text-decoration-none" to="/windows">
Enter this link for more https://reactrouter.com/docs/en/v6/getting-started/overview#navigation
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I make a react project with yarn. I install bootstrap with yarn add bootstrap. After that I import 'bootstrap/dist/css/bootstrap.min.css' and copy paste bootstrap navbar to my code. But when started the display looks messy.
The App.js code
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
);
}
export default App;
The result
Edit:
I was try with the react bootstrap instead of regular bootstrap but the result still same
My App.js
import logo from './logo.svg';
import './App.css';
import { Navbar,Nav,NavDropdown,Form,FormControl,Button} from 'react-bootstrap'
function App() {
return (
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
}
export default App;
You should be using https://react-bootstrap.github.io/getting-started/introduction instead of plain bootstrap.
It has the functionality of the components along the styles.
Would save you a lot of headaches.
I have a menu on website. Below is the HTML code.
<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
<div class="container position-relative">
<a class="navbar-brand" href="./index.html">
<img class="navbar-brand-regular" src="logo.png"/>
<img class="navbar-brand-sticky" src="logo.png"/>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-inner">
<!-- Mobile Menu Toggler -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
On Mobile menu, when i click on a menu item, the menu did not closed. Below is the script code.
Did I miss anything?
// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
$('[data-toggle="navbarToggler"]').click(function () {
$('.navbar').toggleClass('active');
$('body').toggleClass('canvas-open');
});
// MAIN MENU TOGGLER ICON
$('.navbar-toggler').click(function () {
$('.navbar-toggler-icon').toggleClass('active');
});
Bootstrap will handle all toggle/collapse by itself you do not need to write extra JS. Toggle button must not duplicate as you did to avoid messing up the navbar functioning.
Below is the answer. I optimized your params in few places. If my answer works for you, please tick it as final answer and upvote it so other people with same problem will get help too. Cheers
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
</ul>
</div>
</div>
</nav>
I am trying to do responsive navbar by using bootstrap in reactjs.I have update the show in state so as i do like show or hide the element but the toggle button is not trigger.If i use the script link in bootstrap its working but i don't want to use the scripting links and want to update manual.so help me out.
Here is my code:
import React, { Component } from "react";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
};
}
showToggle = () => {
this.setState({
show: false,
});
};
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="navbar-brand">
<img
alt="logo"
src="./images/or.png"
width="100px"
height="30"
className="d-inline-block align-top img-fluid"
/>
{/* <span className="nav-brand">Ortho Life Hospital</span> */}
</div>
<button
className="navbar-toggler"
type="button"
// data-toggle="collapse"
// data-target="#navbarSupportedContent"
// aria-controls="navbarSupportedContent"
// aria-expanded="false"
// aria-label="Toggle navigation"
onClick={this.showToggle}
>
<span className="navbar-toggler-icon"></span>
</button>
{this.state.show ? (
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav ml-auto">
<li className="nav-item ml-5">
<a className="nav-link" href="/">
Home
</a>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/about"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
About Us
</a>
<div
className="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a className="dropdown-item" href="/about/#history">
History
</a>
<a className="dropdown-item" href="/about/#vision">
Vision and Mission
</a>
<a className="dropdown-item" href="/about/#whyortho">
Why Ortho?
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<div className="dropdown">
<a
className="nav-link"
href="/department"
id="dropDownDepartment"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Department
</a>
<div
className="dropdown-menu"
aria-labelledby="dropDownDepartment"
>
<a
className="dropdown-item"
href="/department/#medical"
>
Medical
</a>
<a
className="dropdown-item"
href="/department/#allied"
>
Allied
</a>
</div>
</div>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/media">
Media
</a>
</li>
<li className="nav-item ml-5">
<a className="nav-link" href="/contactus">
Contact Us
</a>
</li>
</ul>
</div>
) : null}
</nav>
</div>
</div>
</div>
);
}
}