The navigation bar in tabs #1 and #2 is currently overlapping the logo. I have made numerous attempts to correct this issue without success. The navigation bar should be positioned right below the logo.
I will figure this out.
body { font-family: Arial, sans-serif; margin: 20px; }
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;}
th {
background-color: #f2f2f2;
}
.logo-container {
position: fixed;
top: 0;
left: 0;
margin:10px;
z-index:1000
}
img.logo{
background-color: transparent;
padding: 0;
margin: 0;
border:none;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbba1b9a1bd">[email protected]</a>/dist/css/bootstrap.min.css">
<div class="logo-container">
<img src="https://picsum.photos/100/200" alt="logo_me" height="100" width="200" class="logo">
</div>
<div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" aria-selected="true">Info</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" aria-selected="false" tabindex="-1">Tabla de precios</a>
</li>
</ul>
</div>Where am I going wrong?
I have attempted multiple times to no avail