IOS menu in the wrong place about bootcards HOT 11 CLOSED

Could you add the class navbar-left to the menu button and let me know if it helps?

<button type="button" class="navbar-toggle navbar-left" ...

from bootcards.

do you mean on

 <div class="navbar-header">
        <button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>

As this still doesn't fix the issue

from bootcards.

My mistake, it might need to be on the other button - got my buttons mixed up!

<button type="button" class="btn btn-default btn-menu pull-left offCanvasToggle navbar-left ...

from bootcards.

No still didn't fix it

from bootcards.

It's strange because your markup looks more or less like the demo:
http://demo.bootcards.org/

That seems to be using a slightly earlier version of Bootcards – v1.1.0 – it might be worth trying that version in case a bug was introduced recently

from bootcards.

I'm seeing the same problem - it appears to have been introduced in 1.1.1. I noticed in 1.1.0 the button is absolutely positioned and it was changed to be relatively positioned.

from bootcards.

I've updated the demo app to 1.1.2. Menu button looks fine on iOS.

Only thing I do notice (on an iPhone) is that the header title is too far to the right.

from bootcards.

I converted my app back to v1.1.0 and it works fine.

I can get the same result as the demo with my app on v1.1.2. Until the header bug is fixed I won't upgrade

from bootcards.

It looks like it is dependent on the location of the .navbar-brand:
Bootcards
I moved mine outside of the .navbar-header (but still inside the .container) and the layout is correct using 1.1.2.

@tomturner it looks like we used the same template or example to get that layout; even though it isn't what is in the demo app or the current starter template.

from bootcards.

Correct, but the .navbar-brand title should be inside the .navbar-header block. The buttons should be inserted above the .navbar-brand and have the class navbar-left.

I added that missing navbar-left class to the docs, demo app and starter templates (see master branch). This is what the navbar should look like:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <button type="button" class="btn btn-default btn-back navbar-left pull-left hidden" onclick="history.back()">
      <i class="fa fa-lg fa-chevron-left"></i>
      <span>Back</span>
    </button>
    <!-- menu button to show/ hide the off canvas menu -->
    <button type="button" class="btn btn-default btn-menu navbar-left pull-left" data-toggle="offcanvas">
      <i class="fa fa-lg fa-bars"></i><span>Menu</span>
    </button>

    <a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>  

    <!--navbar menu options: shown on desktop only -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
        <a href="#">
          <i class="fa fa-dashboard"></i> Dashboard
        </a>
      </li>
      ...
    </ul>
  </div>          
</div>

from bootcards.

I can confirm this now works. Many thanks

from bootcards.