CSS/HTML for Images Over Navigation/Menu Bars

Posted on 2012-08-11
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
    LVL 2

    Expert Comment

    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

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

    Expert Comment

    Just add z-index to both navbar and logo
    logo must be lower than navbar

    supply code if you need help
    LVL 9

    Accepted Solution

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now