I’ve created a fixed header with custom properties using bootstrap.
It contains 2 image elements one is asset\fetching.gif
and another is asset\logout.png
and when I execute it, the asset\fetching.gif
is overlapping the asset\logout.png
.
Did I make any mistakes?
<div class="fixed-top header shadow-sm d-flex align-items-center justify-content-between p-3" style="margin-right:10px;margin-left:10px;">
<div class="d-flex align-items-center">
<h1 class="text-2xl pt-2 d-none d-sm-block">Smart Problem-solving using AI-driven Resource Kit</h1>
<h1 class="text-2xl pt-2 d-sm-none">S.P.A.R.K</h1>
</div>
<img id="fetchingGif" src="asset/fetching.gif" alt="Fetching" class="w-auto h-12 max-h-12 mx-2">
<button id="logoutBtn" class="btn" style="background-color:transparent;padding:0;border:none;">
<img src="asset/logout.png" style="width:40px;height:40px;" alt="Logout">
</button>
</div>
What I’ve attempted :
I checked the HTML code where the fetching GIF and logout button are in a flex container.
I added a Bootstrap class (mx-2) to the fetching GIF to make space, but it still covered the logout button.
Everything that I’ve tried didn’t work.
You need to sign in to view this answers