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
Leave feedback about this