Overflow in footer

May 13, 2022

I have a footer with the follow code:


<div class="footer" style="width: 100%;"><h5>
 <a style="width: 30%; float: left; margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a> 
 <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">Novidades</a>
 <a style="width: 30%; float: left; margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
 </h5></div>

The css code are:


.footer {
  overflow-x: scroll;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 5px solid rgba(0,0,0,0.2);
}

/* Links inside the navbar */
.footer a {
  display: block;
  color: #030534;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

/* Change background on mouse-over */
.footer a:hover {
  background: #030534;
  color: white;
}

And the result is:

However, I want add more fields in this footer and want that works sliding. I cant do this. When I add another field, with this code:

<div class="footer" style="width: 100%;"><h5>
  <a style="width: 30%; float: left; margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a> 
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">Novidades</a>
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">TEST</a>
  </h5></div>

And the result are:

How to I add a overflow footer?

Thanks for all!

>Solution :

this may help you, see snippet

.footer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 5px solid rgba(0, 0, 0, 0.2);
}


/* Links inside the navbar */

.footer a {
  display: inline-block;
  color: #030534;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}


/* Change background on mouse-over */

.footer a:hover {
  background: #030534;
  color: white;
}

<div class="footer" style="width: 100%;">
  <a style="margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a>
  <a style="margin-left: 2.5%;" href="descubra.html">Novidades</a>
  <a style="margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
  <a style="margin-left: 2.5%;" href="descubra.html">TEST</a>
</div>