Responsive Navigation Bar Collapsing Issue

I am creating a responsive navigation bar that will collapse once the window size gets too small. So far, I have been successful at making this however the shrinking of the window size would push my links onto a different line before collapsing the navigation bar. To fix this issue, I set white-space: nowrap; however now the navigation bar collapses once the right most links have been hidden away by the page border. Can someone suggest how I fix this issue?

HTML:

            <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="">HOME</a></li>
                    <li class="nav-item"><a class="nav-link" href="">ABOUT</a></li>
                    <li class="nav-item"><a class="nav-link" href="">WHO ARE WE</a></li>
                    <li class="nav-item"><a class="nav-link" href="">GALLERY</a></li>
                    <li class="nav-item"><a class="nav-link" href="">FUTURE ROADMAP</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">RESOURCES</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">RULES</a>
                            <a class="dropdown-item" href="#">INFO</a>
                            <a class="dropdown-item" href="#">DOWNLOADS</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

CSS:

.navbar {
    white-space: nowrap;
    transition: background 250ms ease-in;
}

.nav-item a{
    color: black;
    margin: 15px;
}

.dropdown-menu {
    overflow: hidden;
}

.dropdown-menu a:hover {
    max-width: auto;
    background-color: deepskyblue;
    color: ghostwhite;
}

Any help would be greatly appreciated.
Kind Regards

Hello @satanshumishra467661, welcome to the forums! You could set a media query to the size at which the link position is adversely altered-and the website would respond to the size you set. A media query looks like this:

@media only screen and (max-width:/*the max width of the browser before this query is executed*/){
/*CSS code that you want altered when the browser is small*/
}

I hope this helps!

Thanks for the reply. I tried what you suggested and put Navigation related CSS inside of a media query however it still didn’t solve the issue. In addition to the code above, I also have the following CSS for my document:

@media (max-width: 767px) {
  .navbar-collapse
    {
    background-color: black;
    background: rgba(0, 0, 0, 0.8);
    }
}

If possible, please advise any additional steps I can take to address this problem.
Kind Regards

After experiment for hours, the solution was simply linked to the class designation I gave Navbar which I seem to cliped out of the code in the initial message. As stated in the Bootstrap Documentations:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl}

The solution was to simply change it to xl which worked perfectly for my scenario. However, because these are set to pre-determined values, there must be a way to customise the breakpoint at which the navbar collapses. Nevertheless, this is the solution to my issue.

1 Like