Unable to add Mobile Fixed Bottom Navigation Bar in Wix Studio

Question

this is my custom codeThis is my cu stom code

.custom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}

.custom-nav a {
  text-decoration: none;
  color: inherit;
}

.custom-icon {
  /* Add your custom icon styles here */
  width: 20px;
  height: 20px;
  /* Adjust size and styles as needed */
}

/* Mobile responsiveness (optional) */
@media (max-width: 768px) {
  .custom-nav {
    display: flex; /* Only show on mobile screens */
  }
}

<div class="custom-nav">
  <a href="#"><i class="custom-icon"></i> Home</a>
  <a href="#"><i class="custom-icon"></i> Notifications</a>
  <a href="#"><i class="custom-icon"></i> Profile</a>
</div>

I have tried the above code and placed it in settings custom code in body end but of no use. nothing displays Is there a way to do this by custom code or in Wix studio (New)