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..

    how to change the height of a div dynamically based on another div using css?

    How can I escape my application.html.erb file

    How to render text in .NET in the same size as browsers does given CSS for the text

    How does Apple position its slideshow inside a fixed-position box?

    How to set two floated divs to be the 100% height of the page

    How to add background-image onto the first option of a dropdownlist

    CSS centering my slideshow in the header

    How to set just a percentage of a color in CSS?

    How can I avoid CSS delay in Rails 3.2

    How do I make an erasing animation in CSS? [closed]

    How do I set css using jQuery .css after a period of time?

    How do align texts in the child div

    How to update current css version in asp.net

    How do I put a clear button inside my HTML text input box like the iPhone does?

    How to organize user's shares to easily add comments to that particular post?

    How dynamically aligning text on website

    How to modify css to show slider text

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to place a div on right side of cascading tables - CSS

    How do I vertically center text and have the dark blue bar go across the entire screen

    How to shift the alignment of text in a select dropdown toward the top and left with CSS?

    bootstrap collapse to show a div it work but how to make it didn't affect side items?

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How to apply Title Case in input box through css

    How to draw random lines with CSS to replicate effect [closed]

    How to override default CSS in cakePHP 1.3?

    CSS How to change background color of text?

    How to keep table headers fixed while scrolling down a table

    How to “add details” to CSS (example Box shadow)

    How can I change a table's column widths?