Keep inline menu on mobile and iPad size

Good afternoon,

I would like to keep the same inline menu found for desktop on the mobile and iPad sizes. Is this possible?

Hello there,

Try to reduce the top level menu left/right padding by adding the below CSS code to Appearance > Customize > Additional CSS from your site dashboard.


#mainnav .menu > li {
  padding-left: 5px;
  padding-right: 5px;
}

Regards,
Kharis

Hi Kharis,

Thank you for the quick reply. It didn’t seem to work. I may not have asked my question correctly. I’m trying to keep the default menu (found on the desktop version) to stay on both the mobile and iPad versions. Is that possible?

I am sorry for not getting it correctly. Please try doing the below steps and let me know how it works for you.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {
	
  $(window).on('load resize', function() {
    
    $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    $('#mainnav').find('.submenu').removeAttr('style');
    $('#header').find('.col-md-10').append($desktopMenu);
    $('.btn-submenu').remove();
    
  });  

})(jQuery);

  1. Update
  2. Apply the below extra CSS code to Appearance > Customize > Additional CSS:

@media only screen and (max-width:1024px){
  
  .btn-menu{
    display: none;
  }
  
  #mainnav{
    display: block;
  }
  
}

@media only screen and (max-width:767px){
  
  #mainnav{
    float: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  
}

Regards,
Kharis

Thanks for writing back Kharis,

It does remove the hamburger menu but it seems to just disable all resizing. When I got on mobile I only see half the website. I want everything to stay responsive but to keep the same inline menu as on the desktop version of the theme

Hello there,

Please share your site link here, so I can inspect it directly to troubleshoot.

Regards,
Kharis

Hi, I want my desktop MENU same as mobile 3 bars, when i click it show me menu, how can i do it?
i have tried above code but it does not work, here is my link
http://www.pandawhite.com/

Hello there,

To enable mobile menu style on larger screen, you should follow this solution. Let me know if further question comes up.

Regards,
Kharis