I want to change hamburger icon and change hamburger icon to x icon when its clicked.
<Navbar collapseOnSelect expand="lg" >
<Navbar.Brand className="mx-5" href="#home">
<StaticImage src="../images/logo.png"
quality={95}
formats={["AUTO", "WEBP", "AVIF"]}
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav" className="justify-content-around">
<Nav className="mr-auto text-center nav-items">
<Nav.Link className="pt-3 pt-md-1" href="#features">About</Nav.Link>
<Nav.Link className="pt-3 pt-md-1" href="#pricing">Skillset</Nav.Link>
<Nav.Link className="pt-3 pt-md-1" href="#features">Our Brands</Nav.Link>
<Nav.Link className="pt-3 pt-md-1" href="#pricing">Partners</Nav.Link>
<Nav.Link className="pt-3 pt-md-1" href="#features">Careers</Nav.Link>
<Nav.Link className="pt-3 pt-md-1" href="#pricing">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
you can use state for that
const [change, set change] = use state(false)
now in useEffect check your Window's width, if its width is less than a certain number of pixels, u need to change the state value to true.
Now use ternary operator to change icon
{ change ? icon_1 : icon_2 },
Hope u got it!
Related
I have run into some trouble aligning a 'Login' link within my Bootstrap NavBar. Here is the following code of the NavBar:
import React, { Component } from 'react';
import {Navbar, Nav, Container, NavDropdown} from 'react-bootstrap';
import restorifyLogo from '../Images/restorify-logo.png';
class NavbarComp extends Component {
render() {
return (
<div>
<Navbar className="planted-navbar" variant="dark" expand="lg">
<Container className="navbar-container">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="planted-navbar-collapse">
<Nav className="ml-auto">
<Navbar.Brand href="#home">
<img
src={restorifyLogo}
width="243px"
height="70px"
className="d-inline-block align-top"
alt="Restorify logo"
/>{''}
</Navbar.Brand>
<NavDropdown title="Missions" id="missions-dropdown">
<NavDropdown.Item href="county-select">Missions Map</NavDropdown.Item>
<NavDropdown.Item href="current-missions">Current Missions</NavDropdown.Item>
<NavDropdown.Item href="completed-missions">Completed Missions</NavDropdown.Item>
<NavDropdown.Item href="start-mission">Start a Mission</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Trees" id="trees-dropdown">
<NavDropdown.Item href="my-trees">My Trees</NavDropdown.Item>
<NavDropdown.Item href="all-trees">Explore Trees</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="about" id="about-link">About</Nav.Link>
<Nav.Link className="justify-content-end" href="login" id="login-link">Login</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
}
export default NavbarComp;
I am using Bootstrap v5.2.2. Below you can see a screenshot of the NavBar.
So I'm using react-bootstrap to create my Navbar and I want the Navbar link to redirect to the same page but to the spesific part, I tried using href and assigning id into each div, but it wont' work. How to fix this ? Thanks before
Here's my code:
Navbar part
<Navbar className="MainHeader" expand="lg">
<Navbar.Brand as={Link} to={"/"}>
<img src="#" className='encotekiLogo' alt="main_logo"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="justify-content-end">
<Nav>
<Nav.Link as={Link} href='about' to={'/#about'}>About</Nav.Link>
<Nav.Link as={Link} to={"/Gallery"}>Gallery</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
This is the code for my part of the page:
<div className= 'aboutUs' id='about'>
<Row className='mb-4' lg={12}>
<h1 style={{
color: '#246234',
}}>
About<br/>
Us
</h1>
</Row>
</div>
I used the navbar component on my website but I want to align it from the right to left so the first thing coming in the right is Toursitation (Brand Name).
Can you please help me?
this is the code of the navbar:
<Navbar bg="dark" expand="lg" style={{"padding": "0 10px", "background-color": "#132c33 !important"}}>
<Navbar.Brand href="/">TouriStation</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" value={this.state.search} onChange={this.onChangeSearch}/>
<Button variant="outline-info" onClick={() => window.location = "/Search/"+(this.state.search)}>Search</Button>
</Form>
<SplitButton style={{"display": this.state.user ? "none" : "block", "color": "white", marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Join Us"
id="dropdown-menu-align-responsive-2"
variant="info"
>
<Dropdown.Item href="/login">Login</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="/register">Register</Dropdown.Item>
</SplitButton>
<SplitButton style={{"display": this.state.user ? "block" : "none" , marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Profile"
variant="info"
id="dropdown-menu-align-responsive-2" >
<Dropdown.Item href="/newplace" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}}>New Place</Dropdown.Item>
<Dropdown.Item href="/newevent" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} >New Event</Dropdown.Item>
<Dropdown.Divider style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} />
<Dropdown.Item href="/profile">My Account</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="http://localhost:3000/logout/">Sign Out</Dropdown.Item>
</SplitButton>
</Navbar.Collapse>
</Navbar>
Update
that if I use me-auto or '.flex-row-reverse', it will be like this
the orignal one is this
in your code below, remove class name: mr-auto.
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>
So I am creating a personal site using react-bootstrap. And here is what the site looks like right now.
The navbar is
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
<Nav className="ml-auto">
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
and the introduction looks like
<Row>
<Col md={{ span: 4, offset: 2 }}>
<p id='hey'>Hey, I am Max! </p> </Col> </Row>
I really want to shift the navbar to the right with "offset: 2" so that the brand ("React-Bootstrap" in the navbar) can line up with the "Hey, I am Max". I've tried adding padding or margin to Navbar.Brand but it doesn't really work. Is there a way for me to directly add offset:2 to the Navbar.Brand element? Or what might be the best way to accomplish this?
I've been at this for ages and can't seem to work out how to do it. At the moments the NavItem's in my NavBar are aligned to the left. I want them centered. I have tried reading the documentation here https://react-bootstrap.github.io/components/navs/ but it doesn't work.
Here is my Navbar:
<div className="container">
<Navbar collapseOnSelect>
<Navbar.Collapse>
<Nav variant="tabs" defaultActiveKey="/home">
<NavItem>
<NavLink to="/newSite/details">Details</NavLink>
</NavItem>
<NavItem>
<NavLink to="/newSite/tours">Tours</NavLink>
</NavItem>
<NavItem>
<NavLink to="/newSite/pois">POIs</NavLink>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
Make sure to add className="justify-content-center" in your Nav opening tag. If you're trying to center your Nav Items within a Navbar and Navbar.Collapse, add an inline style with flex: 1.
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="justify-content-center" style={{ flex: 1}}>
<Nav.Item>
<Nav.Link href="/home">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Collection</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Contact</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/home">Blog</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
Check out the "Alignment and orientation" section in the React Bootstrap Documentation. - https://react-bootstrap.github.io/components/navs/