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 draw a specific shape in CSS? [closed]

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to alter CSS properties using PHP based on a conditional

    Using jqTransform on hidden contact form, select box value not showing

    css: how to display prev and next links outside slider

    How to implement a drag and swap effect in CSS and JS [closed]

    How to generate CSS markup for non-designers

    How to set two values for one css property?

    How can I make a span stretch the available space between to other spans?

    How to disable [marquee] tag with CSS? Is this possible?

    How to serve SVG using C# so that it will render as a CSS background image

    Background images: how to fill whole div if image is small and vice versa

    How to select via regex all class notations in css file

    How to get rid of the border bottom from my navigation

    how to make this div margin to zero and more nature [closed]

    How do I use CSS to add a non-rectangular border around an image?

    How to prioritize custom css over the default Angular-material css

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    How to change css style by using Unicode Hexadecimal

    How can I make my header fade out/disappear on scroll down and reappear on scroll up?

    How to change the background colour of a QWidget inside QStackedWidget using css?

    jQuery & CSS: how to convert this drawer menu from left to right?

    How to fix smooth text in IE?

    How to use conditional CSS for IE browser in drupal6?

    How to make a CSS div set auto height to content

    How to draw heart with text in middle?

    How to center a child div with a smaller parent div

    How to achieve this oval layout with CSS

    How to do transparent background on few div to see background of parent

    Bootstrap 3: How to code my banner?