Archived topic
Overlap and display the main navigation above hero
3 replies · Started by Elizabeth on June 12, 2020
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
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;
}Hi David,
Thank you so much, that did it!
Elizabeth
Glad to be of help
