Solved

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

Posted on 2015-02-20
2
81 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

617 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