CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdom
Airizzo
Airizzo

Reputation: 165

Stop my Navbar from shifting when I resize the browser window

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. NavBarWide

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

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.

Upvotes: 0

Views: 2595

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

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 right-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

Upvotes: 2

Related Questions