Question 243462 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Bootstrap Nav bar expanding gets cut off (with video)

I am making a react app and have installed the latest bootstrap via

npm install bootstrap

and

npm install bootstrap jquery

and

npm install jquery popper.js

My Navbar works fine when the window is wide, but when you decrease the width and the Navbar becomes a dropdown navbar, it does not work properly. As you click to expand, it starts to expand, but then gets cut off, making it seem like it stops or goes off the page. I can only see the last item.

In my src/index.js I have
and

import 'jquery';
import 'popper.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

My Navbar code is simple stuff

                <nav className="navbar navbar-expand-lg">
                    <div className="container-fluid">
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i className="fas fa-bars"></i>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <Links />
                        </div>
                    </div>
                </nav>

I have tried removing and removing different classes, it seems to be the button toggle action that is where the trouble is rooted.

UPDATE: Link to video to visualize the issue: videoLink

Tags:

2

Answers


  1. 0

    It’s probably a missing jquery dependency.

    First, install jquery and popper.js via npm:

    npm install jquery popper.js

    Import jquery and popper.js in your src/index.js file before Bootstrap’s
    JavaScript:

    javascript

      import ‘jquery’;

      import ‘popper.js’;

      import ‘bootstrap/dist/css/bootstrap.css’;

      import ‘bootstrap/dist/js/bootstrap.bundle.min’;

    Your Navbar component code appears to be OK.
    Login or Signup to reply.
  2. 0

    I couldn’t get this formatted in the comment, so unfortunately I’ve had to put it as another answer. I hope no one minds.

    Make sure the container holding Navbar has enough width. If it’s too narrow, it can cause elements to get cut off when the Navbar collapses.

    Try

    Jsx

      <div className="container-fluid"> {/* Check the container width */}


  <nav className="navbar navbar-expand-lg">


{/* ... */}


  </nav>


</div>

    The "fas fa-bars" class seems OK. but, you might want to make sure that the icon isn’t too large. It could push other Navbar items out of view.

    Try:

    Jsx

    <i className="fas fa-bars fa-lg"></i> {/* Adjust icon size with "fa-lg" */}

    Things you’ve probably checked, but just in case, and it could be helpful to others less experienced:

    Check there are no elements within the Navbar that are too wide, causing overflow. E.g text, icons, or other elements.

    Do you have any CSS applied to your Navbar or surrounding elements? check if it is affecting the layout. Custom styles, sometimes, conflict with Bootstrap’s default styles.

    Very obvious, sorry, but again, just in case: Check you’re using a compatible version of Bootstrap with the installed packages. Bootstrap’s JavaScript components are sometimes sensitive to the version of jQuery and Popper.js.

    Check for JavaScript errors These can sometimes give clues about what’s going wrong.

    If you have custom JavaScript code related to the Navbar or button toggle, try disabling temporarily.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search