Twitter Bootstrap Question posted in

Bootstrap 3 – Ipad not showing arrow/caret for nav bar – Twitter bootstrap

I have integrated twitter bootstrap into my website. I have a navigation bar that has a submenu which works as it should in most browsers but have noticed when using an ipad the caret/arrow is just not there, it disappears. Does anyone know a fix for this?

Im also having an issue with IE on my phone where the caret/arrow changes to a white rectangle shape instead of the caret/arrow

Any help would be appreciated.Im a bit lost with this one

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap     /3.3.6/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

<nav class="navbar navbar-inverse" style="padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px;">
                         <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="#"></a>
                        </div>
                        <div class="collapse navbar-collapse" id="myNavbar">
                          <ul class="nav navbar-nav">
                              <li><a href="/default.aspx">Home</a></li>
                              <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services
                                <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/webpages/1.aspx">Page 1</a></li>
                                    <li><a href="/webpages/2.aspx">Page 2</a></li>
                                    <li><a href="/webpages/3.aspx">Page 3</a></li>
                                </ul>
                              </li>
                              <li><a href="/webpages/4.aspx">Page 4</a></li>
                              <li><a href="/webpages/5.aspx">Page 5</a></li>
                          </ul>
                        </div>
                    </nav>
Tags:

2

Answers


  1. 0

    Try this for the symbol.

    [Arrow caret][http://codepen.io/paulobrien/pen/zxJOaW%5D

    On the cursor: you’re using IE? Bootstrap 3 remember that only works with IE 8 and up … 8 is not very reliable. It may be that IE has trouble reading the cursor. Few people use IE, Web developers what they do is they look good for IE and little else, removing user interactions.

    Login or Signup to reply.
  2. 0

    I was having the same problem and after wrestling with it for awhile I gave up and used font-awesome.

    <i class="fa fa-caret-down" style="color: white;" aria-hidden="true">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search