How to stop button from moving when navar collapse toggle is clicked - html

I'm trying to have my navbar set up like this:
[collapse] navbar icon links sign in button
I have this set up fine. The problem is that when the navbar collapse toggle is clicked, it moves the sign in button under the dropdown with the links. How do I keep the sign in button above that dropdown so the order is collapse toggle in top left, dropdown links, sign in button in top right
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>est</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<a class="navbar-brand d-none d-md-block">
<img src="{{ url_for('static', filename='images/website/test.png') }}" alt="Logo" width="50" height="50">
test
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sign In</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" style="width: 30vw;">
<div class="container-fluid">
test
</div>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>
<script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
</body>
</html>
using bootstrap v5.3.0-alpha1


Add the following CSS:
#media only screen and (max-width: 576px) {
.navbar .btn-group {
position: absolute;
top: 8px;
right: 12px;
}
}
See the snippet below.
#media only screen and (max-width: 576px) {
.navbar .btn-group {
position: absolute;
top: 8px;
right: 12px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>est</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<a class="navbar-brand d-none d-md-block">
<img src="{{ url_for('static', filename='images/website/test.png') }}" alt="Logo" width="50" height="50"> test
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sign In</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" style="width: 30vw;">
<div class="container-fluid">
test
</div>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>
<script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
</body>
</html>

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 Navbar doesn't collapse on phone

hello can you check this I cannot see the navbar when I turn to the phone please I need some help I want to finish it today, hope someone solve it for me
<!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">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="logo" src="photo/LOGO.png" alt="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link " href="index.html"><button class="btn btn-outline-dark" type="submit">Home</button></a>
</li>
<li class="nav-item">
<a class="nav-link" href="oO.html"><button class="btn btn-outline-dark" type="submit">OO</button></a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><button class="btn btn-dark" type="submit">RR</button></a>
</li>
<li class="nav-item">
<a class="nav-link" href="NN.html"><button class="btn btn-outline-dark" type="submit">NN</button></a>
</li>
<li class="nav-item">
<a class="nav-link" href="CC.html"><button class="btn btn-outline-dark" type="submit">CC</button></a>
</li>
</ul>
</div>
<form class="d-flex" >
<button class="btn btn-outline-dark me-3" type="submit" href="#"><i class="bi bi-twitter"></i></i></button>
<button class="btn btn-outline-dark me-3" type="submit" href="#"><i class="bi bi-discord"></i></button>
</form>
</div>
</nav>
<div class="d-flex justify-content-center">
<img src="photo/dragonoid rr.jpg" class="img-fluid" alt="rr" style="width: 1000px; " >
</div>
<script src="/js/all.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/script.js"></script>
</body>
</html>

Bootstrap 5 "Nav-bar" collapse does not work

Base code:
<?php
session_start();
if ((!isset($_SESSION['valid']) == true)) {
unset($_SESSION['valid']);
header('location:index.php');
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noticias sobre Vacina - Digital</title>
<!-- Bootstrap-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" integrity="sha512-F7WyTLiiiPqvu2pGumDR15med0MDkUIo5VTVyyfECR5DZmCnDhti9q5VID02ItWjq6fvDfMaBaDl2J3WdL1uxA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Noticias sobre a vacina</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home.php"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="cadastro_noticia.php"><i class="fas fa-clipboard-list"></i> Cadastro de noticia </a>
</li>
<li class="nav-item dropdown">
</ul>
<form class="form-inline my-2 my-md-0">
<a class="nav-link active" href="index.php"><i class="fas fa-sign-out-alt"></i>Sair</a>
</form>
</div>
</div>
</nav>
<div id="wrapper" class="toggled" style="margin-left: 5%; display: inline;">
<div class="container-fluid" id="conteudo">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js" integrity="sha512-PqRelaJGXVuQ81N6wjUrRQelCDR7z8RvKGiR9SbSxKHPIt15eJDmIVv9EJgwq0XvgylszsjzvQ0+VyI2WtIshQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="js/noticia.js"></script> -->
</body>
</html>
I've tried redirecting, using other CDNs and other factors, but nothing works, none makes the collapse work. I would like some help as I have no idea why it is not working.
Who can help me and also explain why, I would appreciate it.

You have to change the data-toggle to data-bs-toggle and use data-bs-target attribute. Add the ID in the collapse div. That's all.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapse">

Navbar donesn't Collapse Boostrap

when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5

You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler

How to move bootstrap bottom navbar in a desired place?

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>