0

I'm working on a website on Aruba (remac.srl). I have constructed a menu that is horizontal on desktop and that is "toggle version" on mobile. I haven't problems on the desktop version, while in the mobile versione I have one big problem: when I open "Altri Servizi" section and I scroll down, the menu disappears.

I put in the code, if anyone can help me...

 <!-- Header -->

<header>

<nav id='cssmenu'>
<div class="logo"><a href='/home'><img src="https://files.spazioweb.it/8e/06/8e06738d-73f4-4948-ba5b-55ebd58861fb.png" width="200"></a></div>
<div id="head-mobile"></div>

<div class="botton"></div>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/chi-siamo">Azienda</a></li>
<li><a href="/assistenza">Assistenza</a></li>
<li><a href="/revisione">Revisione</a></li>
<li><a href='/trasloco-macchine'>Trasloco macchine</a></li>

<li><a href='/servizi'>Altri servizi</a>
   <ul>
      <li><a href='/servizi2/torrette'>Torrette</a></li>
      <li><a href='/servizi2/mandrini'>Mandrini</a></li>
      <li><a href='/servizi2/trasportatore-trucioli'>Trasportatore trucioli</a></li>
      <li><a href='/servizi2/ripristino-turcite'>Ripristino turcite</a></li>
      <li><a href='/servizi2/automazione-industriale'>Automazione industriale</a></li>
      <li><a href='/servizi2/messa-a-norma'>Messa a norma</a></li>
      <li><a href='/servizi2/pulizia-macchine-utensili'>Pulizia macchine</a></li>

   </ul>
</li>
<li><a href='/ricambi'>Ricambi</a></li>
<li><a href='/contatti'>Contatti</a></li>
</ul>


</nav>

</header>

<style>

@media screen and (max-width:1000px){
.logo {
    display: block;
    padding: 10;
    width: 100%;
    margin-left: 20px;
    text-align: left;
    float: none;
}

.logo2{display:none}
nav{width:100%;}
#cssmenu{width:97%; margin-top:3px;}
#cssmenu ul{width:100%;display:none; margin-top: -50px;}
#cssmenu ul li{width:100%;border-bottom:0px solid #444; color: #ea5b0c; margin-left: 0px;}
#cssmenu ul li:hover{background:#f2f2f2; color:black;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:35px}
#cssmenu ul ul li{background:#f2f2f2!important;}
#cssmenu ul ul li:hover{background:#f2f2f2!important;}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ea5b0c;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:black;}
#cssmenu ul ul,#cssmenu ul ul ul{
    position:relative;
    left:0;
    width:100%;
    margin:0;
    text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{
    display:block;
    padding:23px;
    color:#ddd;
    font-size:12px;
    font-weight:400;
}
.botton{
    margin-top: 10px;
    width:55px;
    height:46px;
    position:absolute;
    right:0;
    top:0;
    cursor:pointer;
    z-index: 12399994;
}
.botton:after{
    position:absolute;
    top:22px;
    right:20px;
    display:block;
    height:8px;
    width:18px;
    border-top:2px solid black;
    border-bottom:2px solid black;
    content:''}
.botton:before{
    -webkit-transition:all .3s ease;
    -ms-transition:all .3s ease;
    transition:all .3s ease;
    position:absolute;
    top:16px;
    right:20px;
    display:block;
    height:2px;
    width:18px;
    background:black;
    content:''}
.botton.menu-opened:after{
    -webkit-transition:all .3s ease;
    -ms-transition:all .3s ease;
    transition:all .3s ease;
    top:23px;
    border:0;
    height:2px;
    width:17px;
    background:black;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg)}
.botton.menu-opened:before{
    top:23px;
    background:black;
    width:17px;

    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg)}


#cssmenu .submenu-button{
    position:absolute;
    z-index:99;
    right:0;
    top:0;
    display:block;
    border-left:0px solid #444;

    height:36px;
    width:46px;
    cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#f2f2f2}
#cssmenu ul ul .submenu-button{
    height:34px;
    width:34px}
#cssmenu .submenu-button:after{
    position:absolute;
    top:3px;
    right:21px;
    width:8px;
    height:2px;
    display:block;
    background:black;
    content:''}
#cssmenu ul ul .submenu-button:after{
    top:18px;
    right:21px}
#cssmenu .submenu-button.submenu-opened:after{background:#000000;}
#cssmenu .submenu-button:before{
    position:absolute;
    top:0px;
    right:24px;
    display:block;
    width:2px;
    height:8px;
    background:black;
    content:''}
#cssmenu ul ul .submenu-button:before{top:15px;right:24px;}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}

<script>

(function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".botton").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 1000;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);
</script>
gengns
  • 1,573
  • 14
  • 23
Jessica Martini
  • 253
  • 2
  • 3
  • 11
  • Hello @Jessica, I have copied [your example in JSFiddle](https://jsfiddle.net/aqhx03ek/). Could you explain and reproduce your mobile issue there? I noticed that the menu disappear when you resize the window, is that what you mean? – gengns Apr 30 '19 at 18:34
  • Hello @gengns, thanks for you interest. I have copied my code here https://jsfiddle.net/7gwk6xrL/1/. The menu in the editor is perfect, but after site publication (http://www.remac.srl) I have noticed that the menu disappear when the user touches and drags the menu, for example to see all voices of "Altri servizi" category, you have to go down, but menu disappears! This not happen on the editor, because you can't touch and drag. I would like to understand what I have to modify. – Jessica Martini Apr 30 '19 at 21:52
  • Could you reproduce the problem in your JSFiddle https://jsfiddle.net/7gwk6xrL/1/show? I opened it on my phone and it's working as expected, also I tested doing a quick App with your code using Cordova. Could you be adding something extra to [remac.srl](http://www.remac.srl/)? – gengns May 01 '19 at 21:35
  • So if you drag down the menu, it doesn't disappear on you phone? I think that there is one parameter in the CSS that causes the problem... Can it be a z-index? – Jessica Martini May 02 '19 at 10:07
  • I try to reproduce the problem on JsFiddle.. It's difficult because there are many files in the template.. And I think that the problem is caused by one element of the template in the body.. – Jessica Martini May 02 '19 at 10:42
  • I can't reproduce the problem.. Here is ok.. https://jsfiddle.net/emtj80rk/show?fbclid=IwAR2W4GSvcgyeCKP0FuzDGQL8-TtYd1Hff55ghTKc4mFXtdMhl1n1e_lYu1A – Jessica Martini May 02 '19 at 11:27
  • https://codepen.io/emredenx/pen/ojcxl I took the code from here... I have read comments and other people have the same problem – Jessica Martini May 02 '19 at 17:36
  • Hi Jessica, I checked your web and it seems like you solved it, well done! If the issue comes back you can try 2 things. A) Use another menu to see what happens. B) Connect your phone to your computer and debug with Chrome. Type chorme://inspect into the URL bar, inspect your web and [check which event is closing the menu](https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools) – gengns May 03 '19 at 10:11
  • I haven't solved.. I can't reproduce the problem in the editor.. It's different! – Jessica Martini May 10 '19 at 16:32

0 Answers0