Sub menu not showing on mobile devices

Hi,

I am quite a beginner with a Word Press and I need some help. I’m using Sydney Theme and running the latest verions on the theme and the WordPress. The problem is that the SUB MENU NOT SHOWING ON MOBILE DEVICES (www.riihonmajatalo.fi). What should I do to fix the problem?

Thanks!

Mikko

Here is my css, where I think the problem is. Am I right?

/*--------------------------------------------------------------
Mobile navigation
--------------------------------------------------------------*/

#mainnav-mobi {
  display: block;
  margin: 0 auto;
  width: 100%;
  position: absolute;
  top: 28px;
  opacity: 0.8;
  background-color: brown;
  margin-top: 15px;
  z-index: 1000;
}

#mainnav-mobi ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnav-mobi ul li {
  margin: 0;
  position: relative;
  text-align: left;
  border-top: 1px solid #252525;
  cursor: pointer;
}

#mainnav-mobi ul > li > a {
  display: block;
  text-decoration: none;
  padding: 10px 50px;
  color: #fff;
}

#mainnav-mobi ul.sub-menu {
  top: 100%;
  left: 0;
  z-index: 2000;
  position: relative;
  background-color: #161625;
}

#mainnav-mobi > ul > li > ul > li,
#mainnav-mobi > ul > li > ul > li > ul > li {
  position: relative;
  border-top: 1px solid #252525;
  background-color: #222;
}

#mainnav-mobi > ul > li > ul > li >  a {
  padding-left: 70px !important;
}

#mainnav-mobi > ul > li > ul > li > ul > li a {
  padding-left: 90px !important;
}

#mainnav-mobi ul.sub-menu > li > a {
  display: block;
  text-decoration: none;
  padding: 5px 60px;
  border-top-color: rgba(255,255,255,0.1);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#mainnav-mobi > ul > li > ul > li:first-child a {
  border-top: none;
}

#mainnav-mobi ul.sub-menu > li > a:hover,
#mainnav-mobi > ul > li > ul > li.active > a {
  color: #fff;
}

.btn-menu {
  float: right;
  font-size: 28px;
  font-family: "FontAwesome", serif;
  /*"FontAwesome"* on oletus fontti*/
  color: #fff;
  text-align: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.btn-menu:before {
  content: "\f0c9";
}

.btn-submenu {
  position: absolute;
  right: 20px;
  top: 0;
  font-family: 'Cormorant Infant', serif;
  /*"FontAwesome"* on oletus fontti*/
  font-size: 20px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  width: 70px;
  height: 44px;
}

.btn-submenu:before {
  content: "\f107";
  color: #fff;
}

.btn-submenu.active:before {
  content: "\f106";
}

Hello Mikko,

I have just checked your website on low resolution and it looks like you have already resolved this issue, can you please confirm or deny it?

Kind Regards, Roman.

Thank you for quick answer!

Yes, I resolved the problem. I’m using TJ Custom CSS plugin. I compared my css code on the TJ Custom CSS with the original css. The only “major” difference was the font I was using. I changed the font back to original and the problem was solved.

My css code above is missing the following part of a code that exists in the original code :

.btn-menu {
    display: none
}

If I leave the code there as in the original css code, I will lose the main menu in mobile devices. When I remove it, I will have the main menu visible. How’s that working?

Hello Mikko, there is also:

.btn-menu {
    display: block;
}

…wrapped in @media only screen and (max-width: 1024px), so mobile menu button is hidden on desktop and displayed on mobile.

By the way, now you can add CSS code in WordPress itself without plugins. You can add it in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

Kind Regards, Roman.

Ok. Thanks a lot. I quess I will be asking more help later on :slight_smile:

mikko

Okay Mikko, you are welcome! And have a nice day :slight_smile:

Kind Regards, Roman.