Stop my Navbar from shifting when I resize the browser window

Question

I'm taking over a project from a work colleague. I'm trying to get the Navbar to stop collapsing when the browser window is made smaller. I'm not proficient in Bootstrap, so I need help.

Here is the HTML and Javascript.

<body  onresize="onResize()">
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Divine</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Home", "Index", "Home")</li>
                    @if (1 == 1)
                    {
                        <li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
                    }
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Reports", "Contact", "Home")</li>
                </ul>
            </div>
            @Html.Partial("_LoginPartial")
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">


        </div>

    </div>
    
    <div id="content1">
        @RenderBody()
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    });
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    });

    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    }
    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    }
</script>

Here is the CSS portion.

.container {
    max-width:800px;
    margin-left:0px;
}

Here is a picture of what it looks like normal.

This is what it does when I minimize the screen. I want it to just fall off the screen and not compact itself.

I've tried inputting <style> min-width="800px"</style> directly in both divs,and the nav and the UL. Nothing worked. I'm thinking I need to utilize bootstrap to do this or Javascript, and I don't know enough about that, but I'm willing to learn!

Result I want the browser window to be able to be minimized, and the navbar to stay like it is when it's long, and not wrap around and lower itself.

Answer 1

You are using the Bootstrap class navbar-expand-md which is telling the browser to collapse the nav on screens smaller than 768px - if you change that to navbar-expand , it stops the nav from collapsing. If the menu options no longer fit into the width of the screen, they will wrap to a second line.

If you want to prevent this you can set a min-width on your container. However note that because the nav uses the fixed-top class, it has position:fixed meaning that the rig ht-most items will be off-screen on smaller devices and the user cannot access them. You would need to remove the fixed positioning, or you could add a scrollbar to the nav (but that is ugly and unwieldy).

Working Snippet with navbar-expand:

 .container { max-width:800px; margin-left:0px; /* IF YOU WANT TO PREVENT THE ITEMS WRAPPING ONTO A 2ND LINE WHEN THEY NO LONGER FIT IN THE WINDOW: min-width:500px; */ }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <body> <div id="masterlayout" class="fixed-top"> <nav class="navbar navbar-expand navbar-dark bg-dark"> <h1 class="navbar-brand d-flex align-items-center">Divine</h1> <div class="container"> <ul class="nav navbar-nav"> <li></li> <li class="nav-item nav-link mx-1">Home</li> <li class="nav-item nav-link mx-1">Site Admin</li> <li class="nav-item nav-link mx-1">Promotional</li> <li class="nav-item nav-link mx-1">Reports</li> <li class="nav-item nav-link mx-1">Login</li> </ul> </div> </nav> <div style="background-color: darkgray; width: 100%; height: 10px;"> </div> </div> </body>

References: Bootstrap Navbar

Stop my Navbar from shifting when I resize the browser window

Question

1 answers

solution1
1 ACCPTED 2020-08-27 01:22:22

Stop my Navbar from shifting when I resize the browser window

Question

1 answers

solution1 1 ACCPTED 2020-08-27 01:22:22

solution1
1 ACCPTED 2020-08-27 01:22:22