Boostrap nav burger and nav-link displaying at the same time

HTML-CSS
1

From 768px to 992px the burger and nav-links are both displaying. I notice if I change the media query from bootstrap to 992px, it seems to fix this issue. If I try adding this breakpoint to my code with the with at 992px, it does nothing.

nav:

    <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navba-brand" href="#about"> Test</a>

            <button className="navbar-toggler" type="button" data-toggle="collapse"  data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav">
                    <li className="nav-item active">
                        <a className="nav-link" href="#">About <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>

query from bootstrap:

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
2

That’s because the .navbar-expand-lg class should be .navbar-expand-md also no need to use that media query I suppose… that class suffix controls thebreakpoint at wich the nav items are displayd, idem for the hamburguer. Hope it helps.

1 Like
3

Thanks that fixed it. Do you have a link to some documentation explaining this in more detail? I don’t quite understand why navbar-expand-lg displays both the burger and nav-links.

4

Well it is mentioned in the docs

But is doesn’t explain in detail.

Because:
1: .navbar-expand-lg makes the nav links appear from large screen (lg breakpoint) and up, and at the same time it hides the nav links for lower screens while displaying the hamburger menu.
2. Using your media query overrides the above behavior. While .navbar-expand-lg hides the nav links and displays the hamburger, with the media query you are forcing to display the nav links, overriding it, and causing to display both. So bottom line only use .navbar-expand-{breakpoint} without any @media query.

5

I wasn’t actually using any media query at all. I only noticed that breakpoint from inspecting the page. I then tried changing the breakpoint via inspect and it seemed to fix the issue. I hope I’m making some sense.

6

I think it does :wink:
May I ask which version of Bootstrap is? it should have flex properties if is Bootstrap 4 or beyond…

7

I’m currently running on 3.4.1. lol

8

Alright, suspicions confirmed then. Okey I’m not sure you can change the breakpoint really like that, I would have to check a website with B3, if u can make a codepen I can take a look at it

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.