How to place an image on top of Bootstrap NavBar while keeping links clickable?


Tags: css,twitter-bootstrap

Problem :

I'm trying to create a Boostrap UI where the Desktop view (>= 992px) will have a logo just above the NavBar. I created the following fiddle:

http://jsfiddle.net/4qd79699/

To place the logo where I want, I have the following CSS:

.navbar {
   top: -40px;
}

However, as you can see (you might need to expand result view to 992px) the logo is placed behind the NavBar (which makes sense). Now, how can I put the logo on top of the NavBar while being able to click the links?

I have tried adding the following:

.navbar {
   top: -40px;
   z-index: -1;
}

Then it is displayed as I want but I can't click the links on the NavBar. For some reason I wasn't able to bring the logo "up" by switching its z-index.



Solution :

Just add a position:absolute; to the anchor holding your image and you can adjust the margin of your image accordingly after.

Here's a jsfiddle of it: http://jsfiddle.net/o49v85Lh/1/


    CSS Howto..

    CSS: How to produce rounded boxed list

    How to rotate a line(x1=50,y1=50,x2=50,y2=10) with respect to x=50,y=50 as center using CSS?

    How do you extend a Django project root HTML file in project apps?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    Captions not showing correctly when using Anything Slider

    How to apply asynchronously fetched CSS into view

    How to sharpen an image in CSS?

    How to contents of div onclick tab

    How can I target these children divs with one selector?

    How to create an easy responsive grid with one column and two boxes?

    How can I get the body to continue look the same when a div inside overflows to the right?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    How does Twitter put labels inside textboxes?

    How to place text above an element in HTML/CSS?

    Portrait screen with 2 pages but only one of them should show

    How to position html tag above an image and in the middle?

    How to add style to android app

    WordPress admin stylesheet not showing images

    How to add a class if div height reaches a fixed height?

    How to point to CSS default class using the class attribute

    Some misunderstanding how to use bootstrap and css

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to check if a particular CSS value exists

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    HTML/CSS: How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?

    How to make pixel perfect font in css?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How browser renders HTML

    How to enlarge a div without moving other elements

    How to make a CSS transition work “backwards”?