Personal Project Nav Bar cut off

HTML-CSS
1

Hello! I’m trying to incorporate Bootstrap into my personal project and my nav bar is being cut off at the top and haven’t been able to pinpoint the reason why. Any help would be greatly appreciated as I would really like to use bootstrap to create this page.

Here is my HTML and CSS:

<body>
  

    <nav class="navbar navbar-custom navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <video autoplay muted loop id="myVideo" class="center">
      <source src="Videos/asweareFINAL!!.mp4" type="video/mp4">
    </video>
    <!-- Optional: some overlay text to describe the video -->
    <script src="" async defer></script>
  </body>
</html>

CSS:

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; 
  width: 100%;
  height: auto;
  background-color: black;
  
}

body {
  font-size: 2rem;
  font-family: Tussilago;
};


nav{z-index: 1;
position: absolute;}
/* Add some content at the bottom of the video/page */
.content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.container {
  position: absolute;
  z-index: 1;
}

button{color: black;}

.navbar-header {
  background-color: #2c3e50;
}

If there is a better way to share this much code please let me know!

2

I’ve edited your post 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

A link to your pen, repl, etc

4

Hello! Can someone help me figure out how to align my nav bar closer to the left end of the page? I’ve tried using “display: flex” and “justify-content: flex-start” and “position” but both seem to mess with the nav bar positioning on the page.

Here is my code


<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Paluma Sound</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">


  </head>
  <body>
  

    <nav class="navbar navbar-custom navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">Mailing List</a></li>
            <li><a href="#portfolio">Shop</a></li>
            <li><a href="index.php">Tour</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <video autoplay muted loop id="myVideo" class="center">
      <source src="Videos/asweareFINAL!!.mp4" type="video/mp4">
    </video>
    <!-- Optional: some overlay text to describe the video -->
    <script src="" async defer></script>
  </body>
</html>

and my css




#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; 
  width: 100%;
  height: auto;
  background-color: black;
  
}

body {
  font-size: 2rem;
  font-family: Tussilago;
};
/* Add some content at the bottom of the video/page */

.navbar-header {
  background-color: #2c3e50;
}