Bootstrap navbar appearing on 2 lines in Safari on first load

Question

This is the code I have for my navbar:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <button type="button" class="navbar-nav btn btn-default navbar-btn navbar-left previous_page" style="display:inline-block">
      <span class="glyphicon glyphicon-menu-left"></span>
      back
    </button>

    <div class="text-center" id="progress-bar" style="display:inline-block">
      <div data-page="0" class="counter active"></div>
      <div data-page="1" class="counter "></div>
      <div data-page="2" class="counter "></div>
      <div data-page="3" class="counter "></div>
      <div data-page="4" class="counter "></div>
     </div>

    <button type="button" class="navbar-nav btn btn-default navbar-btn navbar-right next_page disabled" style="margin-right:0px;display:inline-block">

      next
      <span class="glyphicon glyphicon-menu-right"></span>
    </button>
  </div>
</nav>

On Safari on iPhone 7, 8, X devices, when you FIRST load the page, the navbar appears on 2 different lines like so:

Then, when you refresh or reload it, it appears normal like so:

I'm having a really hard time figuring out how to get it to always appear normal, and am even more boggled by why a secondary page load corrects the issue.

Note, I added display:inline-block to all 3 navbar elements to try to correct this problem. It's done something... BEFORE I added it, when it was just Bootstrap native styling, on the Safari and iPhone 7, 8, X devices, even refreshing wouldn't help, and the navbar would stay split on 2 rows.

I am using Bootstrap 3.3.4

Answer 1

I go through this i found this solution rather than giving it inline you can use bootstrap class checkbox-inline which will make the center div inline and give navbar text-center class. Use pull-left and pull-right instead navbar-left and navbar-right. Hope it will help you :)

<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
    <button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
        <span class="glyphicon glyphicon-menu-left"></span>
  back

    </button>
    <div class="text-center checkbox-inline" id="progress-bar">
        <div data-page="0" class="counter active"></div>
        <div data-page="1" class="counter "></div>
        <div data-page="2" class="counter "></div>
        <div data-page="3" class="counter "></div>
        <div data-page="4" class="counter "></div>
    </div>
    <button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
  next

        <span class="glyphicon glyphicon-menu-right"></span>
    </button>
</div>
</nav>