As a newcomer to Bootstrap, I'm venturing into website creation for the first time. Any suggestions on how I can enhance the code would be greatly appreciated!
Query: When collapsing the navbar, I noticed that my navbar-brand logo shifts to the bottom. How can I ensure that the logo remains at the top left corner when the screen size is reduced? Please refer to the linked images for visualization of the issue.
I want the logo to overlap the navbar, which I have successfully achieved as depicted in the "not collapsed" attached image.
.navbar {
max-height: 80px;
}
.navbar-brand {
padding-top: 90px;
}
.navbar-toggler {
position: absolute;
} <!DOCTYPE html>
<html lang="en">
<head>
<title>Paradise Hotel</title>
<!-- 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"
/>
<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://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
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>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="https://i.sstatic.net/i60Be.jpg" alt="Brand" width="180" height="180" >
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar-menu"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li class="nav-item">
<a href="#" class="nav-link">Rooms</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Spa</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Casino</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Dining</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Entertainment</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Luxury Packages</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Weddings</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>