Unable to display content below Nav Bar in Html. The “This Navbar is fixed” should display below navigation bar

<!doctype html>
<html lang="en">
    <!--coding by denzel teddy amani-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>responsive bootstrap navbar</title>
    <link rel="stylesheet" href="b1.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body style=" background-color:skyblue ; height: 2000px;">

<!-- Navbar start -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background: orange ;">
    <div class="cointainer">
        <a href="#" class="navbar-brand mb-0 h1 text-capitalize  ">
            <img class="d-inline-block align-top  "  src="images/upnetlogo2.png" alt="upnet logo"  width="70px" height="30px" >
            upnet solutions
        </a>
        <button
        type="button"
        data-bs-target="#navbarNav"
        data-bs-toggle="collapse"
        aria-controls="navbarnav"
        aria-expanded="false"
        aria-label="Toggle navigation"
        class="navbar-toggler fw-bold text-capitalize " style="border: 4px solid yellow;">
        menu
        <span class="navbar-toggler-icon text-right out" ></span>

        </button>
        <div class="collapse  navbar-collapse " id="navbarNav">
            <ul class="navbar-nav text-capitalize">
                <li class="nav-item active fw-bold">
                    <a href="#home" class="nav-link active">
                        home
                    </a>
                </li>
                <li class="nav-item active fw-bold" >
                    <a href="#about" class="nav-link">
                        about
                    </a>
                </li>
                <li class="nav-item active fw-bold">
                    <a href="#" class="nav-link dropdown-toggle " id="navbarDropdrown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                    >
                        packages
                    </a>
                    <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
                        <li><a href="#" class="dropdown-item">home packages</a></li>
                        <li><a href="#" class="dropdown-item">business packages</a></li>
                        <li><a href="#" class="dropdown-item">live stream packages</a></li>
                    </ul>
                </li>
                <li class="nav-item active fw-bold">
                    <a href="#" class="nav-link">
                        support
                    </a>
                </li>
                <li class="nav-item active fw-bold">
                    <a href="#" class="nav-link">
                        gallery
                    </a>
                </li>
                <li class="nav-item active fw-bold">
                    <a href="#" class="nav-link">
                        testimonials
                    </a>
                </li>
                <li class="nav-item active fw-bold">
                    <a href="#" class="nav-link">
                        accounts
                    </a>
                </li>
            </ul>
        </div>
        <form class="d-inline-flex ">
            <input type="text" class="form-control me-2">
            <button type="button" class="btn btn-primary">search</button>
        </form>
    </div>
    </nav>
    <!-- Navbar End -->
        <!--Mask-->
        <div class="view hm-black-strong">
            <div class="full-bg-img flex-center">
                <div class="container">
                    <div class="white-text text-center wow fadeInUp">
                        <h2>This Navbar is fixed</h2>
                        <h5>It will always stay visible on the top, even when you scroll down</h5>
                        <br>
                        <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
                    </div>
                </div>
            </div>
        </div>
        <!--/.Mask-->
































































    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    width: 100%;
    padding-top: 130px;
    overflow: hidden;
}
.btn{
    float: left;
    font-size: large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
a.active{
    background-color:#04AA6D !important;
    color: red !important;
}
a:hover{
    background-color: red !important;
    color: white !important;
}
.navbar-brand{
    pointer-events: none;

}

The content is displayed below the nav so I don’t know what you are asking here.

As an aside, you can’t just hide the overflow on the body, if you do that you won’t be able to scroll the page.


I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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