After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue.
Please refrain from marking this question as a duplicate.
The problem I am facing is that my dropdown menu is not appearing above other elements on the page.
I've shared the relevant code on jsfiddle
NOTE: To properly view the header, please drag the output window towards the left.
In the SCSS editor, the user profile dropdown is controlled by the class navbarDropdown
.navbarDropdown {
float: right;
padding: 0px 10px;
position: relative;
img {
margin-top: -5px;
height: 40px;
}
ul {
background-color: $base-secondary-color;
padding: 4px 0;
position: absolute;
z-index: 999;
top: 30px;
left: 0;
width: auto;
border: none;
border-radius: 1px;
}
ul a {
height: 30px;
padding: 0 40px 0 10px;
display: block;
}
}
I have experimented with both position:absolute and z-index properties.
I am unsure where the mistake lies. Any assistance would be greatly appreciated.