Desktop Navigation on Tablet

Hello there,

I’ve tried getting the desktop navigation menu to display on tablet or down to around 900px but I haven’t been able to fix it. I found a support ticket about this for other themes which I tried to use for Ignis, with some tweaks, but wasn’t successful. Any help would be much appreciated!

Thanks,
Kajsa

Hello Kajsa,

Please try doing the below steps:

  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. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (max-width:1024px){
      .btn-menu{
        display: none !important;
      }
      #mainnav{
        display: block;
      }
    }

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

Regards,
Kharis