[Resolved] Overlap and display the main navigation above hero

Home Forums Support Overlap and display the main navigation above hero

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1324999
    Elizabeth

    Hi,

    I’m working on a new website where the main navigation bar needs to overlap the hero image on the homepage and #page on the secondary pages. The CSS that I have so far (which is working almost as it should) is:

    /* MAIN NAVIGATION BAR */
    #site-navigation {
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
    }
    #primary-menu {
    background-color: #88236c;
    width: 620px;
    margin-left: auto;
    margin-right: 80px;
    margin-bottom: -20px
    }

    The problem that I haven’t been able to solve so far is that the bottom of the navigation bar is hidden by the hero image on the homepage. I’ve tried playing around with the z-index but haven’t had any luck yet.

    Here’s a link to a secondary page which shows how the menu should look: https://tiglutik.candyappledev.com/why-tiglutik-now/.

    Any suggestions are much appreciated!

    Thanks,
    Elizabeth

    #1325017
    David
    Staff
    Customer Support

    Hi there,

    you have this CSS – add the extra properties i have commented below:

    #primary-menu {
        background-color: #88236c;
        width: 620px;
        margin-left: auto;
        margin-right: 80px;
        margin-bottom: -20px;
        /* Include the next two lines */
        position: relative;
        z-index: 100;
    }
    #1325258
    Elizabeth

    Hi David,

    Thank you so much, that did it!

    Elizabeth

    #1325262
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.