Mobile menu on larger screens

Here is the relevant code from scripts.js:

                'isMobile': function () {
                        var windowWidth = window.innerWidth;
                        return windowWidth <= 991;   
                },

/**                                 
                 * Handles dropdowns on touch devices.
                 * @returns {boolean}                 
                 */                                   
                'handleTouchDropdowns': function () { 
                        var windowWidth = window.innerWidth;
                        if ( windowWidth < 991 ) {          
                                return false;               
                        }

Actually the relevant code more like these ones:

/**                                                                
                 * Handle the responsive menus under 769px.        
                 */                                               
                'handleResponsiveDropdowns': function () {  
                        var windowWidth = window.innerWidth;         
                        if ( windowWidth > 768 ) {                   
                                return false;                                                                                            
                        }

/**                                                                
                 * Reposition dropdowns if they are out of screen.                 
                 * @returns {boolean}                                              
                 */                                                
                'repositionDropdowns': function () {              
                        var windowWidth = window.innerWidth;
                        //Do nothing on mobile.                      
                        if ( windowWidth <= 768 ) {                  
                                return false;                                                                                            
                        }

/**                                                                              
                 * Check navbar scroll point.                                
                 */                                                                     
                'checkNavbarScrollPoint': function () {                      
                        if ( $( '.navbar-header' ).length === 0 ) {                                                  
                                return false;                                                                                           
                        }                                                                                                               
                                                                                                                                        
                        // Window width bigger or equal with 768px                                                                      
                        if ( $.utilitiesFunctions.getWidth() >= 768 ) {

if ( window_width < 768 ) {                                                                                                   
                                navHeight = $( '.navbar' ).outerHeight();                                                                             
                        } else {                                                                                                                      
                                navHeight = ($( '.navbar' ).outerHeight() - 15);                                                                      
                        }

so the article does not seem like it will actually make things work.

Hi @chamois_blanc,

Thanks for choosing Hestia!

I tested the code that can be found in that documentation and it works properly on my end – screenshot. Please make sure you properly set the desired breakpoint on the first line of the code. If the changes don’t take effect, please clear the cache (browser and plugin, if you use any caching plugin) and check again.

Have a nice day!

Hi @luciamarinescu,

Thank you for your reply. Please test that the menu is actually working, i.e. it can be opened and closed. Mine has submenus too. The issues that I mentioned with the code above make it impossible for it to actually work. One of your developers should be able to confirm it or explain what I missed. Thank you ??

Hello @chamois_blanc!

The menu is clickable and it is working properly on my end, including the submenus. If it is not working for you, there may be a plugin conflict. You could try to install the Health Check & Troubleshooting plugin, enable the troubleshooting mode which will deactivate all plugins and check if the issue persists. If the problem doesn’t occur anymore, it means it was indeed caused by a plugin conflict and you should reactivate the plugins one by one, until you find the culprit. Then, replace that plugin with an alternative one. Also, please clear the cache as there may be a caching issue as well.

I hope this helps!

Have a nice day!

Hi @luciamarinescu,

I took the Hestia demo site (https://demo.themeisle.com/hestia/) and manually added the CSS code. Here is a screen video recording of the result:
https://drive.google.com/file/d/1doegincMqlB6FIjiSyEqtC9IQkWPTuNz/view

You can see the added CSS code on the right. I set the max-width to 991px. You can see the mobile menu is not working properly between 768px and 991px. Let me know what I am doing wrong.

Hi @chamois_blanc!

I still can’t replicate this issue on my instances with the code from that documentation and the max-width set to 991px – screencast. However, I am able to see it on the demo site. Do you encounter the same issue on your site as the one from the demo?

Thank you!

Yes, the exact same. Do you have your instance accessible online so that I can take a look and maybe figure out what’s different?

Hi @chamois_blanc!

Thank for confirming! Unfortunately my instance was a temporary one and it’s not available anymore. Could you please tell me where do you add the CSS? Are you adding it in the Additional CSS section within the Customizer? Sometimes the CSS is not properly overwritten, depending on the way it is added, and it may lead to CSS conflicts. Also, it would be great if you could provide us the URL to your site.

Thank you!