Stack Overflow
Stack Overflow

Questions tagged [react-bootstrap-nav]

30 questions
1
vote
0 answers

react-bootstreap NavDropdown invalid hook call

I have this Nav component I created using the react-bootstrap@2.7.2 package. The error that I am getting is this: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following…
CookieMonsta89
  • 125
  • 1
  • 1
  • 9
1
vote
1 answer

How can I make a navbar toggler collapse when an option is selected?

I have a bootstrap navbar with 5 NavLinks and a collapse into a toggler on smaller screens. When a NavLink is clicked, the toggler collapses again; however, when an
Rachel
  • 25
  • 3
1
vote
0 answers

react navbar hamburger moves below on xs size screen

I'm trying to make a navbar with its items on the right side of the screen, and the on the left. I managed to do it, however, when I change the screen to a phone screen size, the hamburger moves to the bottom of the Navbar.Brand. I…
Don
  • 21
  • 2
1
vote
1 answer

React Application not rendering components when using the NavBar

EDIT: I am using React 18.2.0 and React router dom 5.3.3, and I recently replaced React.Strictmode with Fragment this evening in my index.jsx file. As title says, the application is working well except for the NavBar. When you click the sections…
diacoviello
  • 31
  • 3
1
vote
1 answer

In React-Bootstrap 2.5.0 is there a way to put the Navbar.Brand next to the Navbar.Toggle?

Currently, I have the following where the Navbar.Toggle is on the left and my Navbar.Brand is on the far right. Since my toggle opens an offcanvas from the left hand side, I wanted the toggle button to be on the left. However, I want my Navbar.Brand…
usagibear
  • 303
  • 3
  • 12
1
vote
0 answers

Navbar is not closing automatically in mobile while scrolling and visiting other page by navbar, How to change toggler hamburgur color

In Mobile Navbar is not closing automatically when page scroll down or when we visit different page by clicking on content of navbar then it is not closing. And How i change the color of toggler because my toggler is hiding with same color of…
Harsh Anand
  • 11
  • 1
1
vote
1 answer

how to move Nav.Link in Bootstrap react Header to the right side?

Hi guys so I'm trying to make header for my web page application using React Bootstrap, but I can't separate the logo with the Nav.link (all of them placed on the left side), but I want the Logo to be on the left side meanwhile the other Nav.link on…
Kim San
  • 575
  • 7
  • 22
1
vote
1 answer

NavDropdown Tab not set to active when Dropdown Item link is active (react-bootstrap)

I'm still quite new to Typescript and react and unfortunately don't understand what I'm doing wrong. I have a tab style nav with a NavDropdown. Unfortunately the dropdown is the only tab that does not get the active class when one of the dropdown…
axelhaar
  • 39
  • 1
  • 7
1
vote
1 answer

React Boostrap 4 css module not getting applied to Navbar

I am having trouble trying to change my navbar's color.. Am I missing any steps? this is the component i am trying to render: import React from 'react'; import { Nav, Navbar } from 'react-bootstrap'; import styles from…
Hyun0614
  • 21
  • 1
1
vote
0 answers

"TypeError: _camelize.default is not a function" in React-Bootstrap

Using pre-built components from: https://react-bootstrap.github.io/components/navs/ https://react-bootstrap.github.io/components/navbar/ I'm trying to build a navigation bar, but getting the following error: Unhandled Runtime Error TypeError:…
MB141
  • 114
  • 1
  • 7
1
vote
1 answer

Route stays the same with links platform/:id in Navbar dropdown item React react-bootstrap

I want to achieve the link= /platform/:id each time the navbar dropdown item is selected. instead i get /platform/:id/platform:id code for the Header.js: import React from 'react' import { Route } from 'react-router-dom' import { useDispatch,…
NroGamerz
  • 189
  • 2
  • 8
1
vote
1 answer

Send object in value attribute with react

I need to be able to send two values when handling an onChange event in my select box however I am not sure a way of doing this as they are currently sent as a string. I am using react with react-bootstrap. const DropDown = () => { const…
ashley g
  • 857
  • 3
  • 11
  • 21
0
votes
1 answer

Bootstrap Navbar Not Spanning Full Width or Touching Top

I'm having trouble with the Bootstrap navbar in my React application. The navbar isn't spanning the full width of the screen, leaving gaps on the left and right sides. It also doesn't touch the top of the screen. import React from "react"; import…
Kasra Panahi
  • 13
  • 2
0
votes
0 answers

How to create a stacked menu with dropdown using bootstrap 5

I have a menu that is stacked over each other as shown in the image below. I am trying to do this using bootstrap menu dropdown but unable to get it right. can anyone assist please?
0
votes
1 answer

React Bootstrap - How to use Rows and Cols to align Search box in Navbar with the center card of the body?

My current page looks like this: Page screenshot I want the search box in the Navbar to be in aligned with the center Card column in the body (where you see create post). Here is the snippet for my Navbar:
Sami Ahmad Khan
  • 1
  • 1
1
2