make header image to partially overlap fixed nav bar with working buttons

Question

There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.

By default it works fine because of some trick which I don't know. Image ovelaps the navbar but links in navbar are still working in the area where image is transparent

However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image. My html is the following:

<div class="container brand-img-container">
   <img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />      
</div>   

<div id="nav-wrapper" class="container">
<div class="row">
    <div id="nav" class="navbar navbar-static span4">
        <div class="navbar-inner">
                <ul class="nav pull-left">

                    <li><a href="anypage">Button</a></li>
                </ul>
        </div>
    </div>
</div>
</div>

<div class="container">    
   <h2> R <h2>    
</div>

CSS is the following

#nav.affix {
 position: fixed; 
 top: 0; 
}

.brand-img-container {
  position: relative;
  margin-bottom: -80px;    
 }

You can find it here with the picture (base64) http://jsfiddle.net/5qYK8/9/

When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all. You can find it here http://jsfiddle.net/5qYK8/8/

Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button? Can someone at least explain why Button is working in first case when image does overlap it?

You might want to proofread your question slowly because it is hard to understand. — Michael Falciglia, Dec 29 '13 at 01:36
So that red cross is not allowing for the button to work or vice versa? — BuddhistBeast, Dec 29 '13 at 01:44
the image doesn't allow the button to work when navbar is fixed (position: fixed) and z-index is used (second example). If z-index is not used (first example) navbar overlaps the image when navbar is fixed (after scrolling) — wyzex, Dec 29 '13 at 01:46
You realize you are covering up that button with the image... right? — BuddhistBeast, Dec 29 '13 at 01:50
@MichaelFalciglia if you scroll down, the button has a different affect as opposed to when that red cross is in vicinity. — BuddhistBeast, Dec 29 '13 at 01:50
my browser is chrome 31.0.1650.63. Please try to scroll in the both fiddles — wyzex, Dec 29 '13 at 01:53
@BuddhistBeast Yes, however it works by default if navbar is not fixed. I don't know why it works here but I'd like it get it the same when I scroll — wyzex, Dec 29 '13 at 01:54
@BuddhistBeast I'm using Chrome in a Mac, maybe that is why I am not having the problem. But when I scroll down, the button remains clickable the entire time. — Michael Falciglia, Dec 29 '13 at 01:59
Yes but the button redirects you to something different when you click on it with the red cross there as opposed to when it is not there — BuddhistBeast, Dec 29 '13 at 02:00
@MichaelFalciglia please double check. In first case link goes to '/' because it is link of image ( tag). In second case link goes to 'anypage' because now it is link of 'Button' — wyzex, Dec 29 '13 at 02:02
Now I have removed from the and have changed links to fiddles in this case to avoid this misunderstanding. — wyzex, Dec 29 '13 at 02:05
@MichaelFalciglia use can use any of them. The question is how to make it working properly for fixed and not fixed cases (red cross should overlap the navbar but Button should work anyway) — wyzex, Dec 29 '13 at 02:18

Michael Falciglia · Answer 1 · 2014-01-25T23:53:18.130

1

Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it

You will need to create another <div> container, then place <a> link around a <div>, like this:

<div id="toplayer">
    <a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>

You will also have to duplicate the selector ID below and rename it to something like this example.

#nav1.affix {
    position: fixed; 
    top: 0; 
    z-index: 0;
}

Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.

#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}

Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.

edited Jan 25 '14 at 23:53

answered Dec 29 '13 at 04:10

Michael Falciglia

1,046
4
20
36

seems it could be a working W/A however it doesn't look very good to repeat all links in this way. Could you please explain why additional div is not required in my first example (unless it is scrolled down) where image is on top of navigation bar and button works fine? Is it possible to have the same behaviour in case of fixed navbar? – wyzex Dec 29 '13 at 04:16
another W/A which is possible is to split the image to 2 different parts with different z-index. But I'd prefer to avoid such work arounds – wyzex Dec 29 '13 at 04:21
1

@wyzex I guess I don't understand the purpose of changing the z-index is if it works for you in the first example. The z-index is for the layer level, so if you change it, its going to change the layer level of the `
`
– Michael Falciglia Dec 29 '13 at 04:22
@wyzex Sorry I'm having lots of internet issues tonight, anyway, in the first example you gave, I can click on it before and after I scroll, this is why I am having such a hard time understanding your problem, because it works for me and I'm using Chrome 31 also. The 2nd example does not work, so thats why I suggested the top layer transparent technique in my answer. – Michael Falciglia Dec 29 '13 at 05:56
@wyzex Also, do you understand that Z-index is telling which layer to be on top? If you make the `.brand-img-container` a higher index, its going to lay over the `#nav` that contains the link, making it unclickable. – Michael Falciglia Dec 29 '13 at 06:01
Yes I do understand it. But in first example it works fine before we scroll it down -> Image overlaps the navbar (visially) however Button is clickable. Could you explain how does it work in this case and how can I use it (and get the same nahaviour) in case navbar is fixed? – wyzex Dec 29 '13 at 08:52
1
@wyzex My answer is the only way I know how to create the effect you want. You don't have to create 2 sets of links, you can make the link(s) transparent, then use Jquery to dynamically copy the link text to the `
– Michael Falciglia Dec 29 '13 at 09:33
@wyzex If you decide to use this method, the jquery blur function should do the trick. You just need to make sure you have version 1.4.3 or higher to make sure it works correctly in IE – Michael Falciglia Dec 29 '13 at 09:42
I've returned to this issue but I can not make your method working. Could you please create an example in jsfiddle? – wyzex Jan 25 '14 at 17:47
@wyzex Remember to accept my answer and vote it up, I spent 30 minutes on this :-) I updated the answer with the fiddle and a few adjustments. – Michael Falciglia Jan 25 '14 at 23:55

make header image to partially overlap fixed nav bar with working buttons

1 Answers1