Bringing logo z-index above other elements including nav-collapse

Hi all,

I have a bootstrap header as follows;

<header>
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 ">
                        <hgroup class="logo-circle">
                            <h1>
                                <a href="@Url.Action("Index", "Home")"><img src="~/Content/images/bridge-direct-logo-circle.png" /></a>
                            </h1>
                        </hgroup>
                    </div>
                    <div class="col-sm-9">
                        <div class="row">
                            <nav class="col-sm-12 text-right">
                                <a class="largeLink" href="mailto:contact@bridge-direct.uk">
                                    <i class="fa fa-envelope color"></i>   <span class="hidden-xs">contact@bridge-direct.uk</span>
                                </a>
                                  
                                <a class="largeLink" href="tel:02031264969">
                                    <i class="fa fa-phone color"></i>   020 3126 4969
                                </a>
                            </nav>
                            <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>

                                <nav class="navy collapse navbar-collapse navbar-right">
                                    <ul>
                                        <li>
                                            <a href="@Url.Action("Contact", "Home")" class="@Html.ActiveClass("Contact", "Home")">Contact Us</a>
                                        </li>
                                        <li>
                                            <a href="@Url.Action("Broker", "Home")" class="@Html.ActiveClass("Broker", "Home")">Broker Zone</a>
                                        </li>
                                        <li>
                                            <a href="@Url.Action("Index", "Home")#about-section" class="@Html.ActiveClass("About", "Home")">About Us</a>
                                        </li>
                                        <li>
                                            <a href="@Url.Action("Index", "Home")" class="@Html.ActiveClass("Index", "Home")">Home</a>
                                        </li>
                                    </ul>
                                </nav>

                    </div>

                </div>
            </div>
        </header>

Select allOpen in new window

the site is running here dev.mfitonline.co.uk.

Now on screen sizes where the nav bar collapse button appears (i.e. on mobiles) I want to have the logo image appear above the callapsable menu, as it overhangs slightly.

Now if I adjust the z-index on the col-sm-3 this does bring it above, but it then cannot click the nav button. However if I apply it to the acutal image because its contained in the row its sitting behind it?

Any ideas on how I can get around this please?