My header contains a dropdown menu that is being hidden behind the section. https://i.sstatic.net/SnQNa.png
The Logout button is located in the top right corner, underneath the name, and it is also not visible. I have attempted to apply the following styles to the parent div, but it has not resolved the issue:
overflow: visible !important;
position: relative;
z-index: 100;
display: block;
Here is the HTML code snippet:
<div class="col-md-6 col-fix dropdown">
<a href="javascript:void(0);" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<% if current_user.center_profile.logo.url.present? %>
<%= image_tag current_user.center_profile.logo.url, alt: "Center Logo", class: "centre", width: "35", height: "35" %>
<% else %>
<%= image_tag 'ic-centerlogo.png', alt: "Center Logo", class: "centre", width: "35", height: "35" %>
<% end %>
<div class="profile-name" title="<%= current_user.center_profile.name %>">
<%= current_user.center_profile.name %>
</div>
<%= image_tag "ic-dropdown.png", alt: "Logout", class: "centre profile-pic", width: "10", height: "5" %>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<%= link_to('Logout', destroy_user_session_path, method: 'delete', class: "dropdown-item", :data => {:confirm => 'Are you sure you want to logout?'}) %>
</div>
</div>
And here is the CSS code snippet:
.dropdown {
overflow: visible !important;
position: relative;
z-index: 100;
display: block;
@include desktop {
text-align: right;
}
@include tab {
text-align: right;
}
@include mobile {
margin-top: 15px;
}
div {
&.dropdown-menu {
box-shadow: 0 0 6px 0 rgba(169, 169, 169, 0.25);
border: 0 none;
position:relative;
background-color:#ffffff;
height:40px !important;
width:116px !important;
margin-top: 10px;
z-index: 30;
overflow: auto;
padding: 0;
&:after {
content:'';
position: relative;
width: 10px;
height: 10px;
transform: rotate(45deg);
top: -5px;
right: 10px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
z-index: -1;
}
.dropdown-item {
padding: .8rem 0;
background: #ffffff;
display: block;
border-radius: 8px;
}
}
}
I also need to eliminate the "up triangle" from the section just below the drop-down icon in the top right corner of the screenshot.