Mobile menu hides behind footer-CodePudding

Afternoon all,

I have been trying to figure out what I have done but can not for the life of me work it out. The navigation menu hides behind the footer instead of showing above it.

My code can be viewed here

 /* Navigation Menu */
.menu {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1;}
.menu li a {display: block; padding: 15px 5px;}
.menu li.subitem a {padding: 15px;}
.toggle {order: 1; font-size: 20px;}
.item.button {order: 2;}
.item {order: 3; width: 100%; text-align: center; display: none}
.active .item {display: block;}
.button.secondary {border-bottom: 1px #4c9e9e solid;}

/* Footer */
.container-fluid {width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.bg {background-color: teal;}
.text-snow {color: #FAF6F6;}
.footer-setup {position:absolute; bottom: 0; padding-bottom: 3rem; padding-top: 3rem; z-index: 1;}
.row {display: flex; flex-direction: column; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; text-align: center;}
.row-setup {padding-top: 3rem;}
.footer-row {flex: 1; margin-bottom: 3rem;}
.footer-row:first-child {margin-left: 20px; margin-right: 20px;}
.footer-row {margin-left: 20px; margin-right: 20px;}
.navbar-brand {display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap;}
.brand-name {margin: -0.5rem 0 0.5rem; font-size: 2.5rem; line-height: 1.2;}
.navbar-brand span {color: #FFAA17;}
.navbar-brand p {margin-top: 0; margin-bottom: 1rem;}
.follow {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.d-flex {display: flex;}
.justify-start {justify-content:space-between;}
.row3, .row4 {display: none;}

CodePudding user response：

Add this CSS to the nav element.

   position: relative;
   z-index: 2;

See Stacking Context.

CodePudding user response：

Under your /* Footer / in your css: .footer-setup {position:absolute; bottom: 0; padding-bottom: 3rem; padding-top: 3rem; z-index: 1;} try changing the z-index to a negative something like -1 or change the z-index on your nav under / Basic Styling */