Menu appears to have collapsed but only partially visible

I am experiencing an issue with the mobile template on my website www.dallazaira.it. When I click on the menu button, only the first menu item is visible.

I have tried various CSS and jQuery solutions as well as spent hours modifying the CSS, but I have not been able to find a resolution. Can someone assist me with this problem? Thank you!

The closed html looks like:
<nav class=" bd-hmenu-1" data-responsive-menu="true" data-responsive-levels="">
<div class=" bd-menuitem-10 collapse-button"><a data-toggle="collapse" data-target=".bd-hmenu-1 .collapse-button + .navbar-collapse" href="#" onclick="return false;" class="collapsed"><span></span></a></div>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class=" bd-horizontalmenu-1 clearfix">
<div class="bd-container-inner">
<ul class=" bd-menu-1 nav navbar-left nav-pills nav-pills">
<li class=" bd-menuitem-3 item-101 current"><a class="  active" href="/"><span>Home</span></a></li>                        
<li class=" bd-menuitem-3 item-125"><a href="/prodotti"><span>Prodotti</span></a></li>                        
<li class=" bd-menuitem-3 item-124"><a href="/gallery"><span>Gallery</span></a></li>                        
<li class=" bd-menuitem-3 item-108"><a href="/dove-siamo"><span>Dove siamo</span></a></li>                        
<li class=" bd-menuitem-3 item-109"><a href="/contattaci"><span>Contattaci</span></a></li>
</ul>    
</div>
</div>        
</div>
</nav>

The open html appears as:

<nav class=" bd-hmenu-1" data-responsive-menu="true" data-responsive-levels="">
 <div class=" bd-menuitem-10 collapse-button"><a data-toggle="collapse" data-target=".bd-hmenu-1 .collapse-button + .navbar-collapse" href="#" onclick="return false;" class=""><span></span></a></div>
  <div class="navbar-collapse collapse in" style="height: auto;">
   <div class=" bd-horizontalmenu-1 clearfix">
    <div class="bd-container-inner">
     <ul class=" bd-menu-1 nav navbar-left nav-pills nav-pills">
      <li class=" bd-menuitem-3 item-101 current"><a class="  active" href="/"><span>Home</span></a></li>
      <li class=" bd-menuitem-3 item-125"><a href="/prodotti"><span>Prodotti</span></a></li>                        
      <li class=" bd-menuitem-3 item-124"><a href="/gallery"><span>Gallery</span></a></li>                        
      <li class=" bd-menuitem-3 item-108"><a href="/dove-siamo"><span>Dove siamo</span></a></li>                        
      <li class=" bd-menuitem-3 item-109"><a href="/contattaci"><span>Contattaci</span></a></li>
     </ul>
    </div>
   </div>        
  </div>
</nav>
jquerycsstemplatesjoomla

Answer №1

It is essential to always examine the elements using browser developer tools. By doing so, you will notice that the menu:

  • is positioned behind the carousel
  • does not have a background-color

Although the element exists, it is not visible on the webpage.

To resolve this issue, consider adding CSS code like:

.navbar-collapse {
  z-index: 100;
  background: white;
}

Moreover, an important lesson to take away from this situation is to invest time in learning how to effectively utilize the browser developer tools. This way, you can accurately identify and address any problem at hand.

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

Exploring the DOM using JQuery

Here is the HTML code snippet: <div id="serverList" class="content"> <div class="boxtitle"> </div> <div id='serverInfo1' class="formEl_b"> <fieldset> <legend>Server #1</legen ...

jquery

Guide to positioning an image at the center across 2 columns using Bootstrap

Looking to create a split screen Bootstrap 4 layout with an image in the center overlapping the two columns. Have successfully set up two equal columns but struggling to position the image to overlap. Have experimented with position:absolute and float:lef ...

htmltwitter-bootstrapcssbootstrap-4

Unable to find results when using JQuery autocomplete dropdown search feature

I am facing an issue with the JQuery autocomplete dropdown inside a bootstrap dialog in my Angular JS application. While I can select items from the dropdown, I am unable to search for specific items. Can anyone help me identify the problem and provide a ...

jqueryangularjs

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss

Troubleshooting VueJS custom prop binding issue within b-form component

I recently tried creating a custom component with a custom attribute following the guidance from this Vue documentation. Here is how I set it up: Vue.component('y-form-checkbox', { props: ['chkLabel'], template: `<b-form- ...

javascriptcssvue.jsvuejs2vue-component

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Failure to send AJAX POST data

When the login button is clicked, I want to send the contents of the email text box. However, nothing happens when I click the login button. Here is the file directory structure: Model/ <-- configuration.php is located inside the Model ...

javascriptphpjqueryhtmlajax

Seamlessly transition between various states within a React component for a fluid user experience

I'm currently working on a simple component structured like this: var component = React.createClass({ render: function(){ if (this.props.isCollapsed){ return this.renderCollapsed(); } return this.renderActive() }, ren ...

javascriptcssreactjscss-transitions

Having trouble with button alignment in the header with Bootstrap 3?

Using Bootstrap 3 and looking to adjust the alignment of a star icon with the title in my HTML page. Here is the current setup: <p class="pull-right visible-xs"> <h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500 ...

htmlcsstwitter-bootstrap-3

Bootstrap 5 - multiple columns of equal width, except for one that fills the remaining space

Imagine a situation where I am using Bootstrap 5 and have the following code snippet... <div class="container"> <div class="row row-cols-auto"> <div class="col">One</div> <div class="c ...

cssbootstrap-5col

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

JQuery experiencing difficulty retrieving the value from textarea

Despite trying various solutions, I am still facing a common issue. I attempted to retrieve the value using val(), text(), and html() as recommended by someone, but none of them worked! Here is the HTML code (within Wordpress): <div class="row"> ...

jqueryajaxwordpresstextarea

Is there a way to stack overlapping divs in a layout that resembles a pile of papers?

I am trying to create a layered effect with multiple divs, where each div is positioned slightly up and to the left of the previous one, giving the appearance of a stack of papers. I have experimented with absolute positioning and z-index, but I'm hav ...

htmlcsspositionz-indexabsolute

Stacking Views with Fixed and Variable Heights - React Native.setVertical

Could someone help me implement the layout shown in the image using Flexbox within a React Native app? If you have a simple example to share, that would be greatly appreciated: https://i.sstatic.net/5thsZ.png ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Using jQuery to validate input values and display warnings depending on the value entered

Is there a way to show a warning to users if they enter a date prior to today? I want to ensure that the span tag displaying this warning is only added once, so it doesn't keep appearing. Here's what I have attempted: $('[name="input_name"] ...

jquery

Change the color of unordered list items only at the same level

Hey there! I'm working with this HTML code: <ul id="nav" class="nav-1"> <li><a href="#">Loans</a></li> <li><a href="#">Bancassurance</a> <ul class="nav-2"> <li><a href="#"&g ...

htmlcss

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...

htmlcssflexbox

Utilizing Jquery, PHP, and Mysql to Modify Values

Looking for assistance with updating an edited value in a MySQL database using jQuery/PHP. I have three buttons: edit/save/cancel When I click on the edit button, the span data is pushed into an input text field and the edit button is replaced with the s ...

javascriptphpjquerymysqlajax

"An unexpected server error occurred when using ajax with Laravel, resulting in a 500

Hi all, I'm encountering a problem while trying to edit comments using ajax in Laravel 5.4. When I click on the "edit" button in the modal, I receive a 500 (Internal Server Error). Here's my JavaScript code: $(document).ready(function(){ ...

jqueryajaxlaravel

Display a list of dates within a specified range using the ng

Utilizing the ng-repeat directive to connect data with a filter for name search: <div ng-repeat='myoldrecs in myoldrec | filter:q as results '>......</div> $scope.myoldrec = [{name:ccc,date:13-02-2016},{name:ddd,date:14-02-2016}]; &l ...

javascriptjqueryangularjsangularjs-filter