Disable hamburger menu

regarding website https://thesourcesacramento.com.

currently, in mobile view the nav phone, chat and text links change the hamburger menu.

  1. How do i disable the hamburger menu? I am only going to have three nav links chat, call, and text, which i want to show on all window/viewpoint sizes. Of course i know they will stack on top of each other in mobile view unless i make them smaller for mobile view.

  2. also, how do i access the mobile view in css? I want to make the nav links smaller when shrinking the window size at certain mobile views.

Hello there,

To accomplish those two, first try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:1024px){

      .btn-menu{
        display: none !important;
      }

      #mainnav{
        display: block !important;
      }

    }

    @media only screen and (max-width:767px){

      #mainnav{
        float: none !important;
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

    }

Second, do 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

`

`

  1. Update
    ;(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);

Run your test. But before doing so ensure any applied cache has been flushed.

Regards,
Kharis

ok great i will work on fine tuning this responsiveness now. let you know if i need any help. thank you very much

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

there is a problem with this line of your code:

   $('#header').find('.col-md-10').append($desktopMenu);

the variable $desktopMenu is undefined.

do you mean to do this instead:

   $('#header').find('.col-md-10').append( '.desktop-menu');

Hello there,

Sorry for I was sharing incorrect code. Try this:

    ;(function($) {

      $(window).on('load resize', function() {

        var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
        
        $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
        $('#mainnav').find('.submenu').removeAttr('style');
        $('#header').find('.col-md-10').append($desktopMenu);
        $('.btn-submenu').remove();

      });

    })(jQuery);

Regards,
Kharis

this code makes the whole nav menu disappear on reload other then in desktop view. resizing the window works but not when reloading in mobile or tablet view.

NOT resizing but reloading the homepage in moible or tablet view the elemet nav changes from <nav id=“mainnav” to <nav id="mainnav-mobi and displays none.

something is overriding the below code and changing the element id of nav back to <nav id=mainnav-mobi I put alert(‘test’) right after the line $(’.btn-submenu’).remove(); in order to see this.

  $(window).on('load resize', function() {

    var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    
    $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    $('#mainnav').find('.submenu').removeAttr('style');
    $('#header').find('.col-md-10').append($desktopMenu);
    $('.btn-submenu').remove();

  });

})(jQuery);

i think i may have found a solution. I ran into this kind of weird issue before which has to do with event bubbling up the DOM tree. What i think is happening is that another event handler for windows “load”, is being triggered after my code.

First i tried to stop all bubbling of the event load when my handler was triggered using "event.stopPropagation() but this did not work. However, event.stopPropagation() allows other event handlers to execute on the same element.

next, i tried event.stopImmediatePropagation() which fixed the issue. event.stopImmediatePropagation() Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

what do you think? I have currently event.stopImmediatePropagation()

;(function($) {

  $(window).on('load resize', function( event ) {
	
    var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style'); 
    
    $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    $('#mainnav').find('.submenu').removeAttr('style');      
    $('#header').find('.col-md-10').append($desktopMenu);
    $('.btn-submenu').remove(); 
	/*alert( event.type );*/ 
    /*event.stopPropagation();*/
    event.stopImmediatePropagation()  /* this function fixes the issue */
  });

})(jQuery);