Mobile Menu Not Displaying Correctly

Hi Ronnie,

Would it be acceptable if the mobile menu gets narrowed? Please try adding the below CSS code to Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Hi Kharis,

I’m not sure what you mean by narrowed. Like reduce the height of the menu? Also, which CSS code?

Thanks,
Ronnie

Hello there,

I am sorry, I hit the submit button too fast. Here is the code:

#mainnav-mobi {
  right: 0;
  width: 170px;
}

#mainnav-mobi ul > li > a {
  padding-left: 15px;
  padding-right: 15px;
}  

Regards,
Kharis

Hi Kharis,

Thanks for the code. It didn’t seem to work, however. Is there a way for me to attach a screenshot of how the website looks on my phone, so that you can see what I’m referring to? I’m not sure what happened to the code because I didn’t change anything. The menu’s black background now drops too low, and it partially covers / overlaps over the page’s title. Any thoughts on why this occurred?

Thanks,

Ronnie

ps The issue only occurs in portrait mode.

To attach a screenshot in your reply, you have to upload it first to the free file hosting service like cloudup.com. Then share its link here.

Regards,
Kharis

Hi Kharis,

Sorry for the late reply. I’ve gone ahead and created an account with CloupUp.com. Here’s a link that illustrates how my mobile menu drops down too low. Hope you can help me figure it out. ??

Thanks,

Ronnie

• This reply was modified 7 years, 8 months ago by 803207739ucla.

Hello there,

Please try adding the below CSS code:

@media only screen and (max-width:767px) {
  
  .btn-menu {
    margin-top: -10px;
  }
  
}

@media only screen and (max-width:500px) {
  
  .text-slider .maintitle {
    font-size: 28px;
  }
  
  .text-slider .subtitle {
    font-size: 14px;
  }
  
}

Let me know how it works for you.

Regards,
Kharis

Hey Kharis,

Yes, it worked. Thanks so much! You’re the man!!

Best,

Ronnie