I am building a responsive website using React Bootstrap. I would like to change the color of the drop down menu once collapsed, and remain transparent once it is not collapsed.
The drop down menu once collapsed is transparent so I changed the css for navbar-collapse.
.navbar-collapse { background-color: #8d8d8d !important; }
Which changed the color but once it is not collapsed its still remains gray. So my question is...how do I change the color only when its collapsed? or clicked?
Problem:
Hameburger Menu
No Hameburger Menu
Expectations:
Hameburger Menu
No Hameburger Menu
This is my code of the NavBar as well
<Navbar collapseOnSelect className="ms-auto navbar navbar-light navbarSupportedContent" expand="lg">
<Navbar.Toggle className="ms-auto navbar-toggler "/>
<Navbar.Collapse className='collapse navbar-collapse navbar.collapsing'>
{menuToBeRendered.map((menu) => {
const isActive = location.pathname === menu.path
return <Nav className={`d-flex menu-item nav-link ${isActive && 'active-menu-item'}`}>
<Nav.Item className='ms-auto'>
<Link to={menu.path}>{menu.name}</Link>
<i className={menu.icon}></i>
</Nav.Item>
</Nav>
})}
</Navbar.Collapse>
</Navbar>
I hope I explained this correctly. Thanks to anyone that may assist me.
Related
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 am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs.
Here is the link:- https://react-bootstrap.github.io/components/tabs/ (It is the vertical tab menu)
I have used the code shown there.
<Tab.Container id="sidebar" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first" className="tab">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second" className="tab">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third" className="tab">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<h1>One</h1>
</Tab.Pane>
<Tab.Pane eventKey="second">
<h1>Two</h1>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
How can I change the background of the active tabs using CSS or bootstrap?
Please help.
Thank you.
as #Tim suggested its also 100% correct when you choose variant="pills" but default is variant="tabs"
For Tabs
.nav.nav-pills .nav-link.active {
background-color: <YOUR_COLOR>
}
For Pills
.nav.nav-tabs .nav-link.active {
background-color: <YOUR_COLOR>
}
I want to make static navbar which does not follow user on sroll.Is there any way to do it in
react-bootstrap?
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Button className={'bootstrapProfile'} variant="outline-info">
<Link key={uuidv4()} to={`/profile/${user.id}`}>
My Profile
</Link>{' '}
</Button>
<Button
className={'bootstrapNewTopic'}
variant="outline-info"
onClick={() => {
history.push('/posts');
}}
>
New Topic
</Button>
</Nav>
<Button variant="outline-info" onClick={() => LogOut()}>
Log Out
</Button>
</Navbar>
I tried to give it classname fixed-top but it did not work.
Please help
It seems like you are using react-bootstrap component Navbar. If that is correct instead of giving class in the component you can try.
<Navbar bg="dark" variant="dark" fixed="top">
Make a class say fixed-top-nav. And use position: sticky property to stick it on the top. Add this class to your navbar
.fixed-top-nav {
position: sticky;
top: 0;
}
If you don't want the navbar to follow the user as they scroll, you don't need to add any special props to the Navbar.
Codesandbox demo
Good afternoon! I'm currently working on a navbar but the menu that pops up on from clicking on the hamburger icon (which shows all the links/navigation-items as a smaller screen widths) is a little too gaudy/not really good on a presentation level. How can I customize that dropdown menu to look better? HTML code is below:
<nav id="navigation" class="navbar navbar-expand-sm">
Brand
<button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
<span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
</button>
<div id="collap-menu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Etsy</a></li>
<li><a class="nav-link" href="#">Facebook</a></li>
<li><a class="nav-link" href="#">Instagram</a></li>
</ul>
</div>
</nav>
What element do I target, or rather, how can I customize a better dropdown menu? I noticed the hamburger icon, when clicked, also pushes the navbar elements up when it shows
Its hard to know exactly how to advise you on styling since we can't see exactly what styles you're currently viewing with just the HTML. Utilizing the core Bootstrap CSS, I can approximate your view and advise accordingly.
Let's say you want to change the background and text color of each of your menu items:
#collap-menu li{
background: #666;
padding-left: 20px;
}
#collap-menu li a{
color: #fff;
}
This would set your menu items to a gray background with white text with a little additional spacing for the text. You can replace the colors here with the branding colors of your website. Any changes beyond changing the text and color would need to be specifically outlined in your request.
I am trying to create a react-bootstrap navbar with a dropdown menu that stays shown when the navbar is collapsed. In other words, the basic-nav-dropdown does not hide like home and link below. I have accomplished this with the following, but there is an issue with the dropdown when the navbar is collapsed.
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Nav className="mr-auto">
<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>
<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>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
Here is what it looks like when the drop down is opened and the navbar is expanded. The dropdown show results below navbar and the results do not affect the presentation of the navbar. This is expected.
Here is what happens when the drop down is opened and the navbar is collapsed. The dropdown does not fall below the navbar, and instead expands the navbar. I would like the dropdown the behave the same as when the navbar is expanded.
Is there a way to make the navbar dropdown expand below a collapsed navbar?
I've also tried removing the <Nav className="mr-auto/> surrounding <NavDropDown> and while that does fix the problem, it introduces new problems as the navdropdown links are not similarly formatted as home and link, and also aligned to the center, not to the left as before.
This is a default behavior of react-bootstrap that, when Navbar is collapsed and contains Dropdown it will expand in Navbar only with following CSS,
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
You can just change the CSS to get desired output as,
.navbar-nav .dropdown-menu {
position: absolute;
}
Demo