1

I develop an application mobile in html/css/php and I'm using bootstrap 3. I fixed a navbar in bottom for being my navigation, but when I'm scrolling, my navbar moving a lot and I can't see the writing below my icons. But, but, maybe it's the console of chrome who doing this ? And in phone that doesn't moving no ?

My code css : 

.navbarMobile {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  height: 50px;
   z-index: 2;
 }

My code html : 

<div class="navbarMobile">
    <div class="col-xs-3 no-padding">
        <a href="#home" class="active"><i class="fas fa-home"></i><p 
        class="menuTitle">Accueil</p></a>
    </div>

    <div class="col-xs-3 no-padding">
        <a href="#news"><i class="fas fa-folder"></i> <p 
        class="menuTitle">Documents</p></a>
    </div>

    <div class="col-xs-3 no-padding">
       <a href="#contact"><i class="fas fa-shopping-cart"></i> <p 
       class="menuTitle">Boutique</p></a>
    </div>

    <div class="col-xs-3 no-padding">
       <a href="#contact"><i class="fas fa-user"></i><p 
       class="menuTitle">Compte</p></a>
    </div>  
 </div>

My result :

Scrolling Up : https://zupimages.net/up/19/21/fqos.jpg

Scrolling Down : https://zupimages.net/up/19/21/21b2.jpg

Paulo Wllier
  • 31
  • 6
  • There must be more code involved. Can you create a fiddle, or provide a link to a test page? – skobaljic May 23 '19 at 09:03
  • Fixed position has many issues in mobile devices. But have you tried this? https://stackoverflow.com/questions/19254146/position-fixed-not-working-in-mobile-browser – Pons Purushothaman May 23 '19 at 09:15
  • Thx for your feedback. I think it's impossible to you to resolve this problem because that was in other css and I never never thinks that modify the code. Hmm an other developer change the property of h2 and put a width: 100% on him. I don't know why he doing that but thats break my block. Thx for ur answers guys – Paulo Wllier May 24 '19 at 10:42

1 Answers1

-2

Sidebars are often relative to their parent elements. So the display attribute is default relative. Try, this one: Adding this one to your sidebar's css

position: fixed
CedricYao
  • 167
  • 1
  • 12