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:

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:

    CSS Howto..

    How to make text and icons black in sticky header?

    How to show indicator of loading?

    How to set shadow on top of a CSS border?

    how to conditionally transform div to and from a state on multiple presses of same button

    How to generate width CSS from JavaScript / C#

    How to draw a gradient colored trapezoid with css3?

    css resize: How to resize a dynamic growing div after max height is active

    How to scale SVG properly and responsively in HTML5?

    How to count total number of divs with in a div using CSS

    Css How to override


    How to accurately position divs with css

    How to click and swap a text in a button?

    How to wrap div containing spans containing the text to be wrapped?

    How to fade out and fade in the divs sequentially

    How can I make this image responsive?

    How to fill width with flex boxes

    CSS - How to upscale Unicode arrows?

    CSS Animations - How to make it stay there after animation? [closed]

    How to embedded all resources(css,js,images) into one single html file?

    How to center equally spaced anchor tags in

    How do I style forms using CSS

    In IE6, how to float item to right without clearing it?

    How to render css file from url in to the webview in android

    How do I get these two columns to have the same height at all times - CSS?

    How to remove

    CSS: How to target all elements within a given ID

    How do I align my label to the left of my text input box with CSS?

    How to give cross browser transparency to element's background only?

    How to create a Twitter Bootstrap Textarea

    How to Dynamically Fit image in screen using css