Nav bar not sticking on mobile

I have an issue that has been bothering me for quite a while:
The nav bar of my portfolio seems to stick fine when I reduce and enlarge the window on all webbroswers I tried (latest versions of IE, Chrome, Mozilla.
BUT it does not stick. It just behaves like another section of the website:
The user scrolls down, and so does the nav bar.

I wish to underline that I decided to design a navbar from scratch (for the fun of it mostly).

And yes, my portfolio is not finished. Thanks for any help that can be given. Below is the code related to the nav bar + CSS and here is the link to my code pen:

<div class=" container navbar-fixed-bottom navigation-bar">
 <div class="nav-element col-xs-3 nav-a"><a href="#home" >Home</a></div>
 <div class="nav-element col-xs-3 nav-a"><a href="#projects" >Projects</a></div>
 <div class="nav-element col-xs-3 nav-a"><a href="#contact" >Contact</a></div>
<div class="nav-element col-xs-3 nav-a"><a href="#about" >About</a></div>

.nav-element {
display: block;
width: 25%;
height: 4.688em;
margin: 0px;
border: 1px solid grey;
font-size 1em;



It looks ok on my mobile. Sticks to the bottom as it should

I forgot to mention: It was using a Iphone (so Safari).

Thanks for the feedback! What mobile browser did you use?

I.m using Xiaomi Redmi Note3 Pro and Chrome 55. The problem seems to be related to iphones so maybe try to google it? Or try to put the website to your own server. Maybe codpen is messing something up

Thanks, I’ll give it a try!