While working on my website using the pre-compiled Bootstrap v4.1.3 code provided on the Bootstrap page, I encountered an issue with the navigation and buttons functionality.
After my meta tags, I have included the CSS links as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issue revolves around a button within the body behaving differently compared to a button in the navigation bar. When hovering over the button in the navigation bar, it shrinks and affects the navbar's height. The link functions correctly, but the hover behavior is not ideal. This same issue occurs when using a button element for the Navbar section provided by Bootstrap.
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
My button works fine, whereas an anchor element with role="button" exhibits similar hover behavior as seen in the Navbar.
I hope this explanation clarifies my problem. The code I have been utilizing is from the Bootstrap documentation. Furthermore, there seems to be a white space issue at the top of the page when "fixed-top" is not applied to the navigation bar class. Although attempting to resolve it via menustyle.css hasn't worked so far, I'm looking for another method to eliminate the white space without relying on "fixed-top" in the nav class.
header{
margin:0px;
}
body{
margin:0;
}