Aşağıdaki gibi küçük bir örnek yaptım, kendinize göre düzenleyebilirsiniz. (footer dosyanıza)

<div class="bottom-nav">
<a href="{{ home }}"><i class="icon-home"></i>Ana Sayfa</a>
<a href="{{ categories_link }}"><i class="icon-category"></i>Kategoriler</a>
<a href="{{ cart }}"><i class="icon-cart"></i>Sepet</a>
<a href="{{ account }}"><i class="icon-user"></i>Hesap</a>
</div>


.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #ddd;
box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
z-index: 9999;
}

.bottom-nav a {
flex: 1;
text-align: center;
font-size: 12px;
color: #333;
text-decoration: none;
}

.bottom-nav i {
display: block;
font-size: 20px;
margin-bottom: 4px;
}


Sadece mobilde görünecekse

@media (min-width: 768px) {
.bottom-nav { display: none; }
}