Solved

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

Posted on 2015-02-20
2
74 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

734 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