[Webinar] Streamline your web hosting managementRegister Today


CSS/HTML for Images Over Navigation/Menu Bars

Posted on 2012-08-11
Medium Priority
Last Modified: 2012-08-11
I have a logo, that I would like to wrap over a navigation bar in a website.


logo by itself
Navigation Bar:

navigation bar by itself
I was able to wrap the logo over the navigation bar using the 'position' attribute in css, but the "Home" link, which is technically covered by the image is NOT available to click.

logo over navigation bar 2
logo over navigation bar 1
Is there any way to make the links under the image available with just HTML and CSS?

Question by:iSreshta
  • 2

Expert Comment

ID: 38284463
The easiest would probably be linking the logo to the home link.

You could also cut the "tail" part of the log off and make it a separate image. The logo image currently inhibits the Home link because the transparent part of the image is layered above it.
LVL 29

Expert Comment

ID: 38284474
Maybe you could use CSS' z-index property to set the position of the links themselves above your logo.  An element with a higher z-index will be on top of one with a lower z-index.

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 38284496
Just add z-index to both navbar and logo
logo must be lower than navbar

supply code if you need help

Accepted Solution

Erdinç Güngör Çorbacı earned 75 total points
ID: 38284499
if you want the logo to be top most and not shaded by navbar
try this trick ;

cut your logo in two pieces
horizontal and vertical 2 pieces and place them as seperated but seems like together.
then you will be able to click home

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question