Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2015-02-20
2
Medium Priority
?
93 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 2000 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

Independent Software Vendors: 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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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).

885 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