Solved

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

Posted on 2015-02-20
2
65 Views
Last Modified: 2016-02-25
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>

Open 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?
0
Comment
Question by:flynny
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40621572
There is no solution without re-locating or re-sizing the logo or the nav.  When the logo is on top of nav the container covers nav and even though you can see it the mouse Cannot see it as the click is absorbed by the logo container.

One of the problems with bootstrap is that predefined common layout is not very smart. So you will need to play with dimension and positioning.

Cd&
0
 

Author Closing Comment

by:flynny
ID: 40625363
i thought so, worth a try.

Thanks.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question