Bootstrap 4 sticky footer issue - html

Question

I'm kinda new to web-development using bootstrap and I'm trying to achieve something with my footer...
Actually my footer is looking like this for the desktop version of my website:
the footer elements are displayed in line without any issue...
But if I change the page's resolution until I reach the mobile design of it my footer elements are stacked on top of each others instead of still being inline:
I tried to fix that to use media queries and css, to add a display : inline-block to the html list but it didn't worked, and I don't really know what I should use to keept it displayed correctly.
Here is the code pen of the footer :
https://codepen.io/rgmislife/pen/poJJeyV
.footer-page {
background-color: #d2d7e8;
right: 0;
bottom: 0;
left: 0;
/**position:absolute;**/
position: relative;
width: 100%;
height: auto;
}
#media screen and (min-width: 320px) and (max-width: 1024px) {
.footer-page {
position: relative;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
.footer-page {
position: absolute;
}
}
.navbar-brand {
font-family: 'Raleway', regular;
color: white;
font-size: 15px;
letter-spacing: 1px;
}
.icon {
font-size: 0.4rem;
}
.nav-link {
font-family: 'Raleway', Semi-Bold;
letter-spacing: 1px;
color: #3a5199;
font-size: 15px;
letter-spacing: 1px;
no
}
<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="footer-page">
<nav class="navbar navbar-fixed-bottom navbar-expand-md bg-faded justify-content-center">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
</li>
<li class="nav-item d-inline-block">
<a class="nav-link" href="nous-contacter.php"><i class="fas fa-envelope fa-2x"></i></a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="nous-contacter.php">Nous contacter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mentions.html">Mentions Légales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="CGV.html">CGV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="presse.html">Presse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="evenements.html">Evénements</a>
</li>
</ul>
</div>
</nav>
</div>
</footer>
and thats is the css code I tried :
.nav li {display: inline-block;}
If anyone has an idea feel free to let me know.
Thanks.

Answer 1

Is this what you're looking for?
#media screen and (max-width:768px){
.navbar-nav{
flex-direction: row;
}
.navbar-nav .nav-item{
margin: 0 10px;
}
}
Your elements are going to stack on mobile regardless based off text length and screen sizes

Answer 2

Your links are stacked, because they don't fit into container. You nothing can do without changing your html structure. And I suggest you to organize the layout ones more. Now it looks quite messy.
Quick fix, just to see what can be done (I see that you use bootstrap, so I base on that):
remove w-50 from navbar-brand link. It is the main reason of links stacking.
Now you want your icons are in the center, and as I understand you want keep them inside navbar-collapse together with links. So remove ml-auto w-100 from ul navbar-nav where are the links. Add mx-autoto ul where icons are, it makes them be in the center between brand and links.
Look into the snippet in full page mode.
.footer-page {
background-color: #d2d7e8;
right: 0;
bottom: 0;
left: 0;
/**position:absolute;*/
position: relative;
width: 100%;
height: auto;
}
#media screen and (min-width: 320px) and (max-width: 1024px) {
.footer-page {
position: relative;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
.footer-page {
position: absolute;
}
}
.navbar-brand {
font-family: 'Raleway', regular;
color: white;
font-size: 15px;
letter-spacing: 1px;
}
.icon {
font-size: 0.4rem;
}
.nav-link {
font-family: 'Raleway', Semi-Bold;
letter-spacing: 1px;
color: #3a5199;
font-size: 15px;
letter-spacing: 1px;
}
<link href="//use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<div class="footer-page">
<nav class="navbar navbar-fixed-bottom navbar-expand-md bg-faded justify-content-center">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
</li>
<li class="nav-item d-inline-block">
<a class="nav-link" href="nous-contacter.php"><i class="fas fa-envelope fa-2x"></i></a>
</li>
</ul>
<ul class="nav navbar-nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="nous-contacter.php">Nous contacter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mentions.html">Mentions Légales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="CGV.html">CGV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="presse.html">Presse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="evenements.html">Evénements</a>
</li>
</ul>
</div>
</nav>
</div>
</footer>