Bootstrap Navbar Barely Showing

Question

So,

My navbar displays fine on a monitor/desktop screen, but when I collapse it down to a smaller view, (iPhone, iPad, Etc.), it shows, but not really... iPhone View . It should collapse and turn into a hamburger menu by default bootstrap navbar functionality right?

Because it was displaying the hamburger menu fine during the early developement of the website, but I must've done something to change it and I have no clue what I did haha.

Here is the code for it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
    <title>@ViewData["Title"] - censored</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-dark">
            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="@Url.Action("Index","Home")">
                    <img src="censored" alt="Logo" style="width:135px; height: 40px; border-radius: 8px;">
                </a>

                <ul class="navbar-nav mt-2 mt-lg-0 ">
                    <li class="nav-item active">
                        <a class="navbar-brand" href="censored" target="_blank">
                            <i class="fab fa-censored fa-3x" style="color:#89cff0;"></i>
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav mr-auto mt-2 mt-lg-0 align-middle style">
                    <li class="nav-item active">
                        <a class="navbar-brand">
                            Censored
                        </a>
                    </li>
                </ul>

                <a class="form-inline my-2 my-lg-0" method="post">
                    @if (!User.Identity.IsAuthenticated)
                    {
                        @Html.ActionLink("Log In", "Index", "Account", null, new { @class = "btn btn-outline-info" })
                    }
                    @if (User.Identity.IsAuthenticated)
                    {
                        @using (Html.BeginForm("LogoutAction", "Account", FormMethod.Post))
                        {
                            <button type="submit" value="Log Out" class="btn btn-outline-primary" asp-antiforgery="false">Log Out</button>
                        }
                    }
                </a>

            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Numans&display=swap');

body {
    background-color: #89cff0;
    font-family: Numans;
}

.style {
    color: white;
    border: 2px white solid;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    padding-left: 10px;
    margin-left: 25%;
}

I have a few things censored out, just due to security reasons, but it's nothing that should hinder you guys from helping.

Any ideas?

Answer 1

compare your code with the bootstrap navbar documentation

<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarTogglerDemo03">
  <span class="navbar-toggler-icon"></span>
</button>

is placed inside of your

<div class="collapse navbar-collapse" id="navbarTogglerDemo03">

The Button must be placed outside of this div, for toggling this div. Like this:

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
   <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#navbarTogglerDemo03">
     <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse"id="navbarTogglerDemo03">
      <a class="navbar-brand" href="@Url.Action("Index","Home")">
         <img src="censored" alt="Logo" style="width:135px; height: 40px; border-radius: 8px;">
       </a>

Bootstrap Navbar Barely Showing

Question

1 answers

solution1
0 ACCPTED 2020-03-02 20:00:21

Bootstrap Navbar Barely Showing

Question

1 answers

solution1 0 ACCPTED 2020-03-02 20:00:21

solution1
0 ACCPTED 2020-03-02 20:00:21