In React I want to either change the toggler completely or at least change the color. I've tried the solutions on the below links with no luck.
5 Years Ago
1 Year Ago
1 Month Ago
I can see the code in the dev tools but it's crossed out, does this mean it's being overidden by Bootstrap?
Here is my NavBar.js file:
import React, { Component } from "react";
import logo from "../images/logo.png";
import { Nav, Navbar, NavDropdown, Form, FormControl, Button, Container } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css';
export default class NewNav extends Component {
render() {
return <div className="myContainer">
<Navbar id="navbar" className="newNav" expand="lg">
<Navbar.Brand href="/"><img id="logo" src={logo} alt="Company Name"/></Navbar.Brand>
<Navbar.Toggle className="custom-toggler" aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link id="nav-links" href="/cleaning-services">Services</Nav.Link>
<Nav.Link href="#link">About</Nav.Link>
<Nav.Link href="#link">Something Else</Nav.Link>
<Nav.Link href="#link">One more then</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
}
}
This is my CSS for the custom-toggler in <Navbar.Toggle
.navbar-light .navbar-toggler-icon {
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
}
Any help would be appreciated
In the end I decided to create my own image using Canva and reference the image in the CSS URL and add the !important tag. Details are below is anyone stumbles across this.
.navbar-light .navbar-toggler-icon {
background-image: url("../src/images/alignRight.svg") !important;
border-color: var(--secondaryColor) !important;
}
I also changed the border to transparent to get my final button as seen below.
Related
i installed the react-bootstrap module using the pm command then imported it in my _app.js file now when i tried to change the bootstrap code i wasnt able to do so
my navbar component provided by bootstrap is this
import Image from 'next/image'
import {
Nav,
Navbar,
NavDropdown,
Form,
Button,
FormControl,
Container,
} from "react-bootstrap";
import headerStyles from '../styles/Header.module.css'
//${headerStyles.navLinks}
export default function NavBar() {
return (
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container fluid>
<Navbar.Brand href="#">
<Image src={'/logo.png'} height = "30px" width="190px"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className={"me-auto my-2 my-lg-0 " + headerStyles.navLinks}
style={{ maxHeight: "100px" }}
navbarScroll
>
<Nav.Link className={headerStyles.navLinks_l} href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className={"me-2"}
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
here I want to try to customize the CSS of bootstrap which I tried doing with CSS module but I failed. Then I used a global stylesheet to do so but failed
can someone please help me with this?
global css:
.navbar-collapse{
background-color: aqua;
color: black;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(0, 0, 0);
background-color: blue;
}
.navbar-expand-lg .navbar-nav{
justify-content: space-around;
margin: 0px;
}
.me-auto{
margin: 0 !important;
}
Import global.css after importing bootstrap in _app.js
import "bootstrap.min.js"
import "global.css"
using !important is not a good choice. explanation here
so I'm trying to create my app using react bootstrap and I want to change the backgroundColor to my desired ones + I want to move the link tag to the right side, I believe in normal HTML we can achieve it by typing class="justify-content-end" but I cant find the way to do it. Can anyone help me please ? Thanks before.
Here's my code:
import "../styles/Header.css"
import { Navbar, Nav} from "react-bootstrap"
function header() {
return (
<div>
<Navbar bsClass="custom-navbar" 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="justify-content-end">
<Nav.Link href="#facilities">Facilities</Nav.Link>
<Nav.Link href="#room">Room</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
My Header.css:
.custom-navbar{
background-color: #10255A;
}
Currently, flex direction of the <Nav> is column which mean you have to use align-items-end to move link tags to the right
<Nav className="justify-content-end align-items-end">
Codesandbox
I'm learning Next.js — currently on version 10.0.3. I'm using react-bootstrap version 1.4.0 and classnames version 2.2.6.
I'm using one component (Navbar) that I'm trying to apply certain styles to, but so far it isn't working. This is what I have so far:
// ~/project-name/components/Header.tsx
import classnames from "classnames";
import Link from "next/link";
import React from "react";
import { Container, Nav, Navbar } from "react-bootstrap";
import styles from "./Header.module.css";
const Header: React.FC = () => {
return (
<>
<Navbar className={classnames(styles.borderBottom, styles.boxShadow)} bg="dark" expand="lg" variant="dark">
<Container>
<Link href="/" passHref>
<Navbar.Brand><span className="font-weight-bold">./shīdo.io</span></Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="id-navbar-nav" />
<Navbar.Collapse id="id-navbar-nav">
<Nav className="ml-5 mr-auto">
<Link href="/" passHref>
<Nav.Link active>Home</Nav.Link>
</Link>
<Link href="/features" passHref>
<Nav.Link>Features</Nav.Link>
</Link>
</Nav>
<Nav>
<Link href="/login" passHref>
<Nav.Link>Login</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
};
export default Header;
# ~/project-name/components/Header.module.css
#charset "UTF-8";
.border-bottom {
border-bottom: 5px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .5rem .75rem rgba(0, 0, 0, .05);
}
The issue is that border-bottom and box-shadow are not being applied to the resulting nav HTML tag in the final document. Any help will be appreciated.
I've also tried to use <style jsx>{``}</style> (with the same styles) within the same Header.tsx component, but it doesn't do anything either.
CSS class names are not picking up. you may try giving like below:
className={classnames(styles['border-bottom'], styles['box-shadow'])}>
React updates the provided user stylesheet class names with their updated names if seen in the developer console.
Not sure if that answers your doubt but you can try something like this for selecting that element through class name:
[class^="Header_border-bottom"] or [class*="Header_border-bottom"]
I want to use NavLink instead of Nav.Link in my react-bootstrap navbar so I can use the activeClassName prop. However it seems that all the links lose their alignment, there is no longer any horizontal margin between them and they are not centered vertically in the navbar:
code as follows:
function NavbarDefault() {
return (
<Container>
<Navbar variant="custom" expand="md">
<Navbar.Brand as={NavLink} to="/">
<img
className="navbar-logo-image"
src={logo} alt="Brand Logo" />
<span className="navbar-logo-text">cool brand</span>
</Navbar.Brand>
<Navbar.Toggle
className="navbar-toggler-custom"
aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/features">Features</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/pricing">Pricing</NavLink>
<NavLink className="nav-link-custom" activeClassName="nav-link-custom-active" to="/contact">Contact</NavLink>
<SecondaryButton
className="navbar-login-button">
Try now
</SecondaryButton>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
);
}
and CSS:
.nav-link-custom {
color: #41a2fb;
}
.nav-link-custom:hover {
color: #0681EF;
text-decoration: none;
}
.nav-link-custom-active {
color: red;
}
Originally I tried to solve this problem by using something like <Nav.Link as={NavLink} ....... this worked for the navigation and alignment however the activeClassName prop doesn't work that way, so I had to revert to NavLink. How can I center these nav links vertically in the navbar?
I'm new to web development, and I'm trying to customize the colors of a react-bootstrap Navbar.
This is the contents of my NavbarComponent.cs file:
var React = require('react');
var ReactDOM = require('react-dom');
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Button from 'react-bootstrap/lib/Button';
import styles from './Navbar.css'
export default class NavigationBar extends React.Component {
render() {
return (
<Navbar brand="react-bootstrap" className={styles.navbar}>
<Nav bsStyle="tabs" activeKey="1" onSelect= {this.handleSelect}>
<NavItem className={styles.navitem} eventKey={1} href="#">Thing 1</NavItem>
<NavItem className={styles.navitem} eventKey={2} href="#">Thing 2</NavItem>
</Nav>
</Navbar>
);
}
}
and this is my css override file, Navbar.css:
:local(.navbar) {
background:#2E5F91;
color:white !important;
}
:local(.navitem) {
color:white !important;
}
The background color of the Navbar changes just fine, but I can't get the text color to change, even using the !important tag (which is dangerous, I know).
Looking at the elements in the resulting page:
<li role="presentation" class="BV2R0XKa1lLedUhy9CO2p" data-reactid=".1.1.0.0.$/=10">
Thing 1
</li>
it looks like my class isn't getting deep enough. How can I fix this?
Thank you!
Welcome to web development, hope you will like as much as we do !
I am not familiar with the css pseudo-class :local, I am curious why not use usual css class ?
.navItem {
color: white;
}
I think the component NavItem does not have a className property
(source : https://react-bootstrap.github.io/components.html#navs-props-navitem)
So maybe that's why it doesn't work, not sure though... I would have done it like this :
<NavItem eventKey={2} href="#">
<span className="navItem">Thing 2</span>
</NavItem>
Here's a jsfiddle: http://jsfiddle.net/u4g5x93w/1/
you can solve this problem by putting
<link rel="stylesheet" href="../Navbar.css">
to the index.html in your project. And also give specific path for Navbar.css in your index.html. then edit what you like.
<Navbar collapseOnSelect expand="lg" bg="light" variant="light" >
.navbar-nav .nav-item a {
color: white !important;
}