How to move bootstrap bottom navbar in a desired place? - html

Here is my bootstrap html:
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body >
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">
<img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">خانه<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">درباره ما</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> حساب کاربری </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="signup.php">ثبت نام</a>
<a class="dropdown-item" href="login.php">ورود</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container py-5">
Lorem ipsum
</div>
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</body>
For short pages, footer is in middle of the screen, how to move it at the very bottom? I used fixed-bottom class, but this time for longer pages, the footer is over the last lines of the page and they are unreadable. How to fix it?


#media (min-width: 1000px) {
html {
height: 100%!important;
}
body {
-ms-flex-direction: column !important;
flex-direction: column !important;
display: -ms-flexbox !important;
display: flex !important;
height: 100% !important;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light {
margin-top: 0 !important;
}
nav.navbar.navbar-light.bg-light {
margin-top: auto !important;
}}
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="jqueryui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.php">
<img src="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">خانه<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">درباره ما</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> حساب کاربری </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="signup.php">ثبت نام</a>
<a class="dropdown-item" href="login.php">ورود</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container py-5">
Lorem ipsum
</div>
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</body>


You can set the position of the footer to absolute (i used inline style but it's not suggested...i did so just to point out clearly what i've done)
<footer style="display:block; position:absolute; bottom:0; right:0; left:0">
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="nav-link" href="privacy.php">سیاست حریم خصوصی</a>
<p>کلیه حقوق این سایت محفوظ است.</p>
</div>
</nav>
</footer>

Related

Bootstrap 5 navbar not collapsing

i have an issue with bootstrap 5 navbar toggle. It's not toggling.
Exactly same code with bootstrap 4 works fine.
I've already tried by some examples to remove navbar-toggler class from button and navbar-collapse class from navbar but it didn't work.
Workaround that I've used is to add onclick element to a button which would point to javascript which will add show class to navbar but I need to figure out why the native method doesn't work.
Tried on Firefox running on Fedora linux and Chrome running on Android 11 phone.
Bootstrap 5 example (not working):
<!doctype html>
<html lang="sr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1">
<link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Navbar Test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/link1">Link 1</a>
<a class="nav-item nav-link" href="/link2">Link 2</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuReports" data-bs-toggle="dropdown" aria-expanded="false">
Reports
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReports">
<li><a class="dropdown-item" href="/reports/reminders">Reminders - Send</a></li>
<li><a class="dropdown-item" href="/reports/reminders?render_only">Reminders - Display Only</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Bootstrap 4 example (working):
<!doctype html>
<html lang="sr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1">
<link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Navbar Test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/link1">Link 1</a>
<a class="nav-item nav-link" href="/link2">Link 2</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuReports" data-bs-toggle="dropdown" aria-expanded="false">
Reports
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReports">
<li><a class="dropdown-item" href="/reports/reminders">Reminders - Send</a></li>
<li><a class="dropdown-item" href="/reports/reminders?render_only">Reminders - Display Only</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>

Change two things:
data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5)
data-target="#navbarNavAltMarkup" (Bootstrap 4) to data-bs-target="#navbarNavAltMarkup" (Bootstrap 5)
See the snippet below.
<!doctype html>
<html lang="sr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1">
<link rel="icon" href="{{ url_for('static', path='/images/favicon.png') }}" sizes="32x32" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Navbar Test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/link1">Link 1</a>
<a class="nav-item nav-link" href="/link2">Link 2</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuReports" data-bs-toggle="dropdown" aria-expanded="false">
Reports
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReports">
<li><a class="dropdown-item" href="/reports/reminders">Reminders - Send</a></li>
<li><a class="dropdown-item" href="/reports/reminders?render_only">Reminders - Display Only</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>

Bootstrap 5.2 Navbar Dropdown doesn't work

I apologize for the topic! I've found many similar topics and advises, however nothing help. I want to create dropdown <a> menu inside the navbar. The code is:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<link href="css/navbar.css" rel="stylesheet" />
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#about"
id="navbarDropdownMenuLink"
role="button"
data-bs-toogle="dropdown"
aria-expanded="false"
aria-haspopup="true"
>
About
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >
<li>
<a class="dropdown-item" href="#">One</a>
</li>
<li>
<a class="dropdown-item" href="#">Two</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>

Change the "data-bs-toogle="dropdown" to "data-bs-toggle="dropdown".
Check the spelling of toggle.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
<link href="css/navbar.css" rel="stylesheet" />
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#about"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
>
About
</a>
<ul class="dropdown-menu position-absolute" aria-labelledby="navbarDropdownMenuLink" >
<li>
<a class="dropdown-item" href="#">One</a>
</li>
<li>
<a class="dropdown-item" href="#">Two</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>

Bootstrap Navigation Bar Alignment Issue with Burger Dropdown

I'm trying to create a navigation bar using Bootstrap.
I tried adding ml-auto to the button, but it didn't do anything.
I'm expecting the burger icon to be on the right but it's just right next to the logo.
Gyazo Link: https://gyazo.com/5e43976fa856dcc2a807ff93d612c989
My HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- My Own Sheet -->
<link rel="stylesheet" href="mystyle.css">
<title>LevelUpIRL</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="logo.png" width="300" height="60"
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Log In</a>
<a class="nav-item nav-link" href="#">Sign Up</a>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
My CSS File
#import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
li, a {
font-family: "Montserrat", sans-serif;
color: #edf0f1;
text-decoration: none;
}
Code from Bootstrap Website
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

The IMG tag is not closed in your code inside A tag.
<img src="logo.png" width="300" height="60"
It should be as below::
<img src="logo.png" width="300" height="60">

you don't need to do any thing just your mistake is that you are not complete the logo image tag > is missing. so it was not structure of your page properly. please complete your image tag and try your code.
Or you can put this snippet html code.
#import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
li, a {
font-family: "Montserrat", sans-serif;
color: #edf0f1;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="#" class="navbar-brand">
<img src="logo.png" width="300" height="60">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#">Log In</a>
<a class="nav-item nav-link" href="#">Sign Up</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You forgot to close the img tag in your logo. Close it and it will fix it.
Change it from
<img src="logo.png" width="300" height="60"
to
<img src="logo.png" width="300" height="60">

My Bootstrap Navbar works fine on Desktop, but on Mobile it overlaps the text in the body. How can I fix this?

As seen here, the Navbar overlaps the text in the body. How can I fix this? This is what it looks like on desktop.
Here is my code for the Navbar:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:(my_email_here)#gmail.com">Contact Me</a>
</li>
</ul>
</nav>
Then the rest of the code is the body text.
Any help is appreciated. I'm going on vacation, so I will try to respond to your comments the best I can, but no guarantees.
(All Code here)

You can remove the .fixed-top class from <nav> element to show the content all the time. So you can also remove the margin-top: 90px; (or adjust the value) to remove / adjust the gap between navigation and content.
<!DOCTYPE html>
<html lang="en">
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MainClass.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:nickbthesaint#gmail.com">Contact Me</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-12" style="margin-bottom: 30px;">
<h3>Who Am I?</h3>
<p>My name is theITguy, and I am a video editor, student, and an active member of the 3D Printing community.</p>
</div>
</div>
</body>
</html>
In case you want to use the fixed navigation, you have to add support for the responsive navgation so you can toggle on mobile.
<!DOCTYPE html>
<html lang="en">
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MainClass.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.html">
<img src="black_hole.jpg" alt="logo" style="width: 40px;height: 40px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="beermoney.html">BeerMoney Routine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:nickbthesaint#gmail.com">Contact Me</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" style="margin-top: 90px;">
<div class="col-md-12" style="margin-bottom: 30px;">
<h3>Who Am I?</h3>
<p>My name is theITguy, and I am a video editor, student, and an active member of the 3D Printing community.</p>
</div>
</div>
</body>
</html>

Text do not show up with bootstrap 4

I have added the following navbar with the new bootstrap 4 version. but it doesn't show anything below the nav bar as well. The text inserted after the nav, also it doesn't take the width and height properties if an external css file is used to give css to the image inserted below. Any idea why this is happening??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/home.css"/>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logofpin.png" alt="Forestpin" width="70" height="30">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Risk Engine</a>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Insights</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
</ul>
</div>
</nav>
vdfnfhmjhngsdhfjfnd
fdbnmjnfbdfgn
sample text
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

In your nav tag fixed-top class causes the issue. You are suppose to use navbar-fixed-top for fixed navbar. Check below snippet for reference.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/home.css" />
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light navbar-fixed-top bg-faded">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logofpin.png" alt="Forestpin" width="70" height="30">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Risk Engine</a>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Insights</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
</ul>
</div>
</nav>
vdfnfhmjhngsdhfjfnd fdbnmjnfbdfgn sample text
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</html>