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