The webview is failing to display the dropdown menu

Everything seems to be working fine with the 3 dropdown menus on this website, as they appear on top of the images below them. However, when I convert the site into an Android app using Webview, the menus end up going under the images instead of on top. Is there a way to fix this issue? Below is the HTML code related to the dropdown menus. Please let me know if any other code is required. Thank you!

<body>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">

        (Dropdown menu HTML code here)

    </div><!-- /.container-fluid -->      
</nav>   

(Center content and PHP code here)
        
    </body>

CSS
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

Answer №1

The issue you're facing is with the mobile navigation dropdown where the height has been set to height: auto. To resolve this, adjust it to a fixed height like "height: 500px", which should alleviate the problem. It's unclear why this occurred, but it could be due to the dropdown's height not being properly nested within the navigation.

Update:

Another solution would be to include "overflow-y: scroll;" in the navigation element while keeping the "height: auto;".

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

What is causing the container to overlap with my sidebar-like <nav>?

Why is the fluid-container overlapping in this way, while others are not? Does this look correct to you, or am I overlooking something? It seems incorrect to me. <nav class="nav flex-column float-left"> {links} </nav> <div class="conta ...

manipulating child element's innerHTML with javascript

Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin. Check out my preview: https://i.stack.imgur.com/lYhsi.png My goal is to have all the tags displayed on a single line without wra ...

I'm confused as to why only one of my HTML pages is accepting my CSS styling - not sure what's going on

I am facing an issue where the CSS styles are only being applied to one of the HTML pages I created. Despite checking my code multiple times, everything seems to be correct. All the necessary files are saved on my laptop in the same folder for the website. ...

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

<AS- Java> Floating Feature: Permanent Center Position

I am struggling with a floating activity that always appears centered on the user's screen, and I can't figure out why. In my XML code, I have the following style defined: <style name="PopupTheme" parent="Theme.AppCompat.Light.DarkActionBar ...

How to effectively delete the class from a navigation list item

Looking for some inspiration? Check out the basic visuals for this question here. But let me break it down for you. This snippet shows the HTML & CSS behind a tabbed-carousel, with a condensed version for clarity: <style> #myCarousel-100 . ...

CSS3 transition applied to a jQuery direction-aware hover effect

I'm encountering difficulties making direction-aware hover and css transitions function correctly. Specifically, I am attempting to create a grid of elements with front and back faces, and on hover, have a css transition that flips the element to disp ...

Interacting with Android TableRows

I'm facing a few challenges that I can't wrap my head around, and I could really use some advice. My Android application is a basic item manager. It consists of 1 activity where I generate table rows dynamically for a nested table layout to disp ...

problem with arranging photos and captions

When viewing this page in a narrow browser window, an issue arises with how the photo captions are displayed at the bottom of the page. It's evident that the caption extends past the right edge of the photo. My preference would be for the photo and c ...

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

Adding margin to an HTML element causes the entire page to shift downward

Despite successfully applying margin to other elements, I encountered an issue with #searchbarcontainer where it causes the entire page to shift downward. My goal is to center it slightly below the middle of the page, but I'm struggling to find a solu ...

Tips for maintaining the default page size on your website when adjusting the browser window size

I've been struggling with a problem for quite some time now. How can I maintain the default page size of my website while resizing the browser? Let's assume the page size is 1280x720, how do I ensure that size remains intact when I adjust t ...

Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

Currently, my navbar is styled with a "shrinkwrap" background to match the width of the content: <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex"> <div class="container-fluid"> ...

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this sh ...

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

I would like to create a top navigation similar to the one on Facebook, using CSS and jQuery. Here is an example: Additionally: Notice how the arrow in the popbox always remains beneath the selected navigation item, and all popboxes have the same width. ...

What sets apart compressing test.min.css from compressing test.css?

Recently, I have transitioned to a new job role with a different employer. In my previous workplace, we utilized LESS and compiled it into a .css file before compressing it further into a .min.css file. However, in my current position, we also work with L ...