The dropdown menu is obscured by the section

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.

Answer №1

To resolve the issue, follow these steps:

I eliminated the following styles from the dropdown class

overflow: visible !important;
position: relative;
z-index: 100;
display: block;

The issue was with the filter div. It had a z-index: 99999. I adjusted it to 0, meaning z-index: 0, and the problem was fixed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

Are HTML files and PHP generated files cached differently by web browsers?

My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...

The appearance of a list item (<li>) changes when navigating to a different page within a master page

I encountered an issue where after logging in with a username and password, upon being redirected to the homepage, the login button reappears on all pages instead of remaining hidden until I logout. My goal is for the login button within the <ul> ele ...

Implementing websocket functionality in Yii framework

I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

The true screen resolution of Safari on iPhone devices

I'm feeling a bit lost right now. Currently, I am using Jquery Mobile and here is my code: <meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no' name='viewport'> When I ran the following ...

Is there a way to iterate through identical sections of HTML using BeautifulSoup?

Looking to extract information from each of the "item watching" elements within the "items" class. Currently facing a challenge where using the find method only retrieves HTML for the first occurrence of "item watching". Aiming to avoid utilizing find_all ...

Modify the color of the lower border and dropdown indicator in Material UI's Autocomplete feature

https://i.stack.imgur.com/oXKQm.png I'm struggling to figure out how to change the color of the line underneath 'Search' and the arrow on the right to white. I've tried applying styles to the .MuiAutocomplete-root css class, but it did ...

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

Create a triangular shape to fit on the right side of a 'li' element

After defining the following HTML: <ul class="steps d-flex"> <li class="step">Basic Details<div class="triangle triangle-right"></div></li> </ul> With this given CSS: .steps li { @ex ...

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

Learn the method of showcasing a JavaScript variable value within an HTML href tag

Currently, I am in the process of rewriting my URL and category name to be passed into the URL. For this purpose, I am creating a URL friendly string using the following JavaScript function: function getUrlFriendlyString(str) { // convert spaces to &ap ...

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

What causes Django to detect errors within comment blocks in templates?

There are times when Django encounters an error in a template. I prefer to comment out the line for debugging purposes, but Django continues to detect the error even within the comment. For instance, this particular link triggers an error because the url ...

Issue with Vue JS component on blade template page

Having trouble loading a Vue component into a Laravel blade file? Despite making changes, the content of my vue file isn't showing up in the blade file - even though there are no errors in the console. Any suggestions on how to resolve this issue woul ...

Prevent using href for opening the browser when clicked

In the control, there is an href link that triggers a javascript function and passes a variable to it: <a href="<%#XPath("link").ToString()%>" onclick="return getLink(this)">Link</a> I'm looking for a way to prevent the browser fro ...

Avoid the resetting of chosen value following a POST or submission

I am currently working on creating a "web dashboard" that requires a year_from parameter from an HTML form. Despite setting up my Flask backend to return data within this specified range, I am encountering a problem where every time I hit submit, the selec ...

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

What is the best way to find out the size of a Google font file?

Google fonts are being utilized in my project, specifically the Roboto font for light and regular font styles. Unfortunately, I am unsure of the file size of this particular font. ...